Static sites, slack and scrollytelling. | Clearleft
Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!
Tags: svg
66
Sunday, November 22nd, 2020
Thursday, October 15th, 2020
Google font to SVG path
Cassie pointed me to this very nifty tool (that she plans to use in your SVG animation workshop): choose font from Google Fonts, type some text, and get the glyphs immediately translated into an SVG!
Sunday, March 22nd, 2020
Lea Verou on Twitter
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>Useful for quick apps when you can’t be bothered to design a favicon!
Tuesday, December 3rd, 2019
Motion Paths - Past, Present and Future | Codrops
This is superbly in-depth and easy-to-follow article from Cassie—everything you need to know about motion paths in SVG and CSS! It’s worth reading just for the wonderful examples.
Wednesday, October 30th, 2019
Interactive web animation with SVG by Cassie Evans | CSSCAMP 2019 - YouTube
Cassie’s excellent talk on SVG animation is well worth your time.
Tuesday, September 10th, 2019
SVG Artista
A handy tool for tweaking the animations in your SVGs.
Tuesday, July 30th, 2019
Creating my logo animation - cassie.codes
What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!
Also: Cassie is on the indie web now, writing on her own website—yay!
Friday, July 5th, 2019
Smashing TV — Webinars and Live Sessions — Smashing Magazine
Don’t miss this—a masterclass in SVG animation with Cassie (I refuse to use the W word). Mark your calendar: August 20th.
Wednesday, May 29th, 2019
Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Impressively lightweight and smooth!
Wednesday, May 22nd, 2019
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
Wednesday, April 24th, 2019
Earth day at Clearleft
Isn’t this just lovely?
Cassie made a visualisation of the power we’re getting from the solar panels we installed on the roof of the Clearleft building.
I highly recommend reading her blog post about the process too. She does such a great job of explaining how she made API calls, created SVGs, and calculated animations.
Thursday, April 18th, 2019
Inlining SVG background images in CSS with custom properties
Here’s a tiny lesson that I picked up from Trys that I’d like to share with you…
I was working on some upcoming changes to the Clearleft site recently. One particular component needed some SVG background images. I decided I’d inline the SVGs in the CSS to avoid extra network requests. It’s pretty straightforward:
.myComponent {
background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}
You can basically paste your SVG in there, although you need to a little bit of URL encoding: I found that converting # to %23 to was enough for my needs.
But here’s the thing. My component had some variations. One of the variations had multiple background images. There was a second background image in addition to the first. There’s no way in CSS to add an additional background image without writing a whole background-image declaration:
.myComponent--variant {
background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>'), url('data:image/svg+xml;utf8,<svg> ... </svg>');
}
So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place.
That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!
:root {
--firstSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
--secondSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}
Then you can reference those in your background-image declarations:
.myComponent {
background-image: var(--firstSVG);
}
.myComponent--variant {
background-image: var(--firstSVG), var(--secondSVG);
}
Brilliant! Not only does this remove any duplication of the SVG source, it also makes your CSS nice and readable: no more big blobs of SVG source code in the middle of your style sheet.
You might be wondering what will happen in older browsers that don’t support CSS custom properties (that would be Internet Explorer 11). Those browsers won’t get any background image. Which is fine. It’s a background image. Therefore it’s decoration. If it were an important image, it wouldn’t be in the background.
Progressive enhancement, innit?
Monday, April 15th, 2019
HTML Includes That Work Today | Filament Group, Inc., Boston, MA
Scott writes up that super smart transclusion trick of his.
Saturday, April 13th, 2019
Inline an SVG file in HTML, declaratively & asynchronously!
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using fill).
The fallback is very graceful indeed: you still get the SVG (just not embedded).
Now imagine using this technique for chunks of HTML too …transclusion, baby!
Thursday, January 31st, 2019
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Saturday, December 29th, 2018
Making single color SVG icons work in dark mode
Another good reason to use the currentColor value in SVGs.
Tuesday, July 31st, 2018
abc to SVG | CSS-Tricks
Aw, this is so nice! Chris points to the way that The Session generates sheet music from abc text:
The SVG conversion is made possible entirely in JavaScript by an open source library. That’s the progressive enhancement part. Store and ship the basic format, and let the browser enhance the experience, if it can (it can).
Here’s another way of thinking of it: I was contacted by a blind user of The Session who hadn’t come across abc notation before. Once they realised how it worked, they said it was like having alt text for sheet music! 🤯
Monday, July 9th, 2018
Solving Sol
Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:
Vertical lines, not straight, not touching, covering the wall evenly.
Tuesday, May 29th, 2018
Dark theme in a day – Marcin Wichary – Medium
On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.
I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.
Friday, March 30th, 2018
Animated SVG Radial Progress Bars - daverupert.com
Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.
In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.