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!
Tags: svg
60
Tuesday, July 30th, 2019
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.
Wednesday, March 7th, 2018
Boxy SVG
This is impressive—a fully featured graphics app for creating SVGS right in your browser.
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
Sunday, January 28th, 2018
Keeping aspect-ratio with HTML and no padding tricks
A clever little hack to preserve an aspect ratio for any HTML element.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
Friday, January 5th, 2018
Improving the Accessibility of 24 ways | CSS-Tricks
Paul walks us through the process of making some incremental accessibility improvements to this year’s 24 Ways.
Creating something new will always attract attention and admiration, but there’s an under-celebrated nobility in improving what already exists. While not all changes may be visual, they can have just as much impact.
Tuesday, January 2nd, 2018
unDraw
Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.
Wednesday, December 6th, 2017
The Times | data viz catalogue
Data visualisations created for The Times, complete with code.