Dear Smashing Friends,
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)
From our sponsor
Make More Than $80k/Year? Set Yourself Up For Financial Freedom
Does your financial plan allow you to retire early? Let Playbook build you an optimized and automated financial plan in minutes. No more money stress.
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.
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:
6. Smart Interface Design Patterns
Recently we’ve finally launched “Smart Interface Design Patterns”, a 6h-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)
From our sponsor
Best-In-Class Membership Software Used By The Biggest Creators On The Web
Memberful is an easily customizable membership software. We maintain a full-featured GraphQL API, webhooks, and OAth Single-Sign-on, so we can seamlessly integrate with any stack. We have everything necessary to run a membership business including; custom branding, free & paid trials, podcasts, newsletters, and more. Check us out today!
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)
10. New On Smashing Job Board
11. Recent Smashing Articles
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).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
