One of the cool things about <svg> is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it. This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which on...
From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:I have something that is sort of a l...
When we produce a PNG image, we use an <img> tag or a CSS background, and that’s about it. It is dead simple and guaranteed to work.PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you’re spoiled for choices when using S...
Y’all probably wouldn’t be surprised if I told you it’s pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I’m a fan of just inlining those suckers, particularly when they are pretty simple. But what else?Logos is a classic example! A lot of pe...
Here’s an idea! Let’s make an an HTML <video> play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this...
Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.I made this demo below to show how I’d approach this question: See the Pen Demo – SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen. Here are the four steps to make the above demo...
I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.Here’s a GIF that shows what I mean:What’s unDraw?While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Her...
Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray and stroke-dashoffset properties:For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we’ve used entire Canvas-based charting libraries (15...
When I saw Chris’ article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like the one below in a cross-browser manner: What the challenge looked like. It looks pretty similar to the concept of notched boxes, except the corners are now scooped and we only have to worry about one ...
SVG stroke animations are nothing new, but when using a more complex drawing that is basically made of strokes, then we can create a very original looking effect. Using many different colors and adding some other element animations, we can bring a very unique looking illustration to live.For the animation we are u...
Recent Comments