Swipey image grids.
This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.
kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes
This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.
I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.
Related links
Static sites, slack and scrollytelling. | Clearleft
Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!
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!
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.
Interactive web animation with SVG by Cassie Evans | CSSCAMP 2019 - YouTube
Cassie’s excellent talk on SVG animation is well worth your time.
Related posts
Speedier tunes
Improving performance with containment.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Speedy tunes
Improving performance on The Session.
Workaround
Browsers and bugs.
Building the dConstruct 2015 site
Hats off to Graham.