Smashing Newsletter: Issue #349

Editorial

I vividly remember one rainy day that changed my life forever. This was the day back in late 90s when I accidentally stumbled upon VRML. The format used to represent 3D interactive vector graphics in a browser was my very first experience with scalable vector objects on the web.

I would spend days and nights in front of a dial-up modem creating all kinds of VRML objects for months. These were different times, but I vividly remember the goosebumps I was getting every time the object would look exactly like I wanted.

We don’t have VRML for decades now, of course. But I’m still getting the very same goosebumps every single time I encounter something magical built with SVG. Some of these magical techniques are presented in this newsletter issue today. From SVG grids to fractional SVG stars, to SVG masks and fancy grainy SVG gradients and SVG tools. We hope you’ll find something useful in here.

In the Smashing department, we are very excited to welcome you to our SmashingConfs 2022 — our in-person conferences taking place in SF, Austin, Freiburg and New York this year. Surely we’ll have a conversation or two about SVG, but also CSS, JavaScript, UX and interface design. We’d be absolutely thrilled to see you there.

And if you don’t want to wait that long, we also have a Smashing Hour with Denys Mishunov coming up this Wednesday, April 20th, where we will be focusing... well, not on SVG, but on DevOps and what front-end developers need to know about it. We hope to see you there, too!

For now though, happy SVGing!

— Vitaly (@smashingmag)

1. Creating Generative SVG Grids

Generative art is a wonderful opportunity for everyone who would love to create art but feels more at home in code. Let’s say you want to create geometric patterns, for example. Generative art will take away the difficult decisions from you: What shapes do I use? Where do I put them? And what colors should I use? If you want to give it a try, Alex Trost wrote a tutorial on creating generative art with SVG grids that is bound to tickle your creativity — and teach you more about SVG.

The generative art that Alex creates is a grid of blocks with a random number of rows and columns. Each block has a randomly chosen design and colors from a shared color palette. Alex takes you step by step through the process of coding this piece: from setting up the grid and how to create isolated functions to draw SVGs to working with color palettes, adding animations, and more. A fun little project — not only if you’re new to generative art and creative coding. (cm)

2. Painting SVG Paths With Masks

SVGs have a lot of benefits compared to raster images. They are small in size, scalable, animatable, they can be edited with code, and a lot more. You can’t get the textured feel that raster graphics can provide, though. However, we can combine the strengths of vector and raster to create some charming effects. Like Tom Miller did in his Silkscreen Squiggles demo.

Silkscreen Squiggles is an animation where squiggles fill a rectangular canvas. What makes the squiggles special is that they appear to have a paintbrush texture. The secret: a mask with an alpha layer that gives the simple squiggly paths their texture. Alex Trost dissects how it works. Inspiring! (cm)

3. Grainy Gradients

Noise is a simple technique to add texture to an image and make otherwise solid colors or smooth gradients more realistic. But despite designer’s affinity for texture, noise is rarely used in web design. Jimmy Chion explores how we can add texture to a gradient with only a small amount of CSS and SVG.

The trick is to use an SVG filter to create the noise, then apply that noise as a background. Layer it underneath your gradient, boost the brightness and contrast, and that’s already it. Potential use cases could be light and shadows or holographic foil effects, for example. The core of this technique is supported by all modern browsers. A clever visual effect to add depth and texture to a design. (cm)

4. Cut-Out Effects With CSS And SVG

In a recent front-end project that Ahmad Shadeed was working on, one of the components included a cut-out effect where an area is cut out of a shape. And because there are multiple ways to create such an effect in CSS or SVG, he decided to explore the pros and cons that each of the solutions brings along.

In his blog post “Thinking About The Cut-Out Effect”, Ahmad takes a look at three different use cases for a cutout effect: an avatar with a cut-out status badge that indicates that a user is currently online, a “seen avatar” that consists of overlapping circle avatars that are indicators that a message has been seen in a group chat, as well as a website header with a cut-out area behind a circular logo. Ahmad presents different solutions for each use case — SVG-only, CSS-only, and a mix of both — and explains the pros and cons of each one of them. A comprehensive overview. (cm)

5. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:

Data Visualization Masterclass Dev
Amelia Wattenberger. Apr 21 – May 5
Web Performance Masterclass Dev
with Harry Roberts. May 3–17
Smart Interface Design Patterns, 2022 Edition UX
with Vitaly Friedman. May 5–19
DevOps Masterclass Dev
with Denys Mishunov. May 16–30
The Fundamentals of UX Writing UX
Yuval Keshtcher. May 18–26
Jump to all online workshops →

6. Smart Interface Design Patterns

Recently we’ve finally launched “Smart Interface Design Patterns”, a 9h-video course with Vitaly Friedman, focused on fine little details that make for better interface design. In the course, you’ll explore 100s of hand-picked examples — from complex navigation to filters, tables and web forms. With 25 lessons available today, and more added every few months. Check the free preview.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. And if you’d like to dive even deeper, there is a live UX training that with UX certification that happens twice a year. There are some early-bird-tickets left. Jump to the details.

7. Fractional SVG Stars With CSS

Are you building a rating component and you want it to support fractional values like 4.2 or 3.7 stars but without using images? Good news, you can achieve fractional ratings with only CSS and inline SVG. Samuel Kraft explains how it works.

The component basically consists of two parts: a list of star icons based on the max rating and an “overlay” div that will be responsible for changing the colors of the stars underneath. This is the magic that makes the fractional part work. The technique is supported in all modern browsers; for older browsers, you can fall back to opacity instead. Clever! (cm)

8. Swipey Image Grids

When you think of “SVG animation”, what comes to your mind? Illustrative animation? Well, SVG can be useful for much more than pretty graphics. As Cassie Evans points out, a whole new world of UI styling opens up once you stop looking at SVG purely as a format for illustrations and icons. One of her favorite use cases for SVG: responsive animated image grids.

Cassie doesn’t build her image grid on CSS Grid but uses SVG’s internal coordinate system (which is responsive by design) to design the grid layout. She then adds images to the grid and positions them with preserveAspectRatio. clipPath “swipes” the images in. The final animation relies on GreenSock to ensure that the transforms work consistently across browsers. If you want to dig deeper into the code, be sure to check out Cassie’s blog post in which she explains each step in detail. (cm)

9. Download SVGs From Any Site

A handy little tool to enhance your SVG workflow is SVG Gobbler. The browser extension finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

When you click the browser extension, it gives you a grid with the SVGs detected on the site. You can quickly download the ones you like or copy them to your clipboard. When you view the code, you can toggle optimization options from SVGO — to beautify the markup or clean up attributes or numeric values, for example. And if you need a PNG version of an SVG, you can export it in any size you want. A fantastic addition to any developer’s toolkit. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

April 19, 2022 Smashing Newsletter: Issue #349

Previous Issues