# SVG animations in CSS A web-development technique for animating SVG elements and presentation properties with CSS animations and related CSS styling. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Timing Charts: A Blueprint For SMIL Animations DevFeed: [Timing Charts: A Blueprint For SMIL Animations]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Johan Grobler) Published: 2026-08-20T13:00:00Z Content type: tutorial Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [SVG](), [SVG animations in CSS](), [frontend animation](), [web animation]() Tags: [animation](), [article](), [css](), [css-animations](), [design](), [svg]() ### AI overview This article explains SMIL as a way to animate SVG graphics without JavaScript. It introduces timing charts as a planning tool for coordinating animation start and stop times, and discusses how structured planning can make verbose SMIL markup easier to manage. ### Source excerpt Discover SMIL, the often-overlooked way to animate SVGs that works inside `` tags and can fully animate everything in an SVG without JavaScript. ## How to Create a Water Ripple Text Effect with SVG Filters DevFeed: [How to Create a Water Ripple Text Effect with SVG Filters]() Original publisher: [Read original article]() Author: Amit Merchant Published: 2026-01-12T00:00:00Z Content type: tutorial Language: en Sources: [Amit Merchant]() Topics: [SVG](), [SVG animations in CSS](), [CSS](), [HTML](), [Code]() Tags: [code](), [css](), [effect](), [filter](), [guide](), [how-to](), [html](), [svg]() ### AI overview This tutorial explains how to create a water ripple effect on text using SVG filters and CSS. It covers defining the target element, configuring filter primitives for noise and turbulence, adjusting their parameters, and applying the filter in CSS. ### Source excerpt So, lately, I have been exploring Haley Park's website and it's pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets. ## 6 winning Figma Makes--and what you can learn from them DevFeed: [6 winning Figma Makes--and what you can learn from them]() Original publisher: [Read original article]() Author: Emma Webster Published: 2025-10-07T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [SVG animations in CSS](), [Code](), [Artificial Intelligence](), [debugging](), [Prompt Engineering]() Tags: [ai](), [animation](), [code](), [creativity](), [debugging](), [figma](), [how-to](), [innovation](), [learn](), [make](), [svg](), [tool]() ### AI overview The article presents six winning Figma Make projects from a global Make-a-thon and extracts lessons for prototyping, product structure, prompting, and iteration. It highlights a frame-by-frame SVG animation tool whose creator used iterative dialogue with AI, explored technical implementation details, and relied on reverting to earlier versions when debugging. ### Source excerpt Winners from our first global Make-a-thon offer insights on how to prototype smarter, structure products better, and push Figma Make further. ## An Inktober Experiment in Daily Internet Art and CSS Animation DevFeed: [An Inktober Experiment in Daily Internet Art and CSS Animation]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2018-11-15T00:00:00Z Content type: opinion Language: en Sources: [Monica Dinculescu]() Topics: [CSS](), [SVG animations in CSS](), [Web Development]() Tags: [animation](), [browser](), [css](), [experiment](), [svg]() ### AI overview The author describes an Inktober experiment in which they created Internet-based artwork instead of traditional ink drawings. The project used daily creative constraints and led to learning CSS, SVG filters, and keyframe animation. ### Source excerpt Inktober is a project where artists make an ink drawing every day for the whole month of October. This year I did an inktober but ignored all the rules, and made Internet Stuff™ instead. That experiment lives here, but I want to tell you why I did it before you go ahead and judge it. I think that it's also important to tell you it was a huge pain in the ass just in case you watched it unfold and thought I magically stuck every landing. The why "Art" is a word I struggle with a lot. I don't think of myself as an artist, because none of the things I make feel like art yet. At the same time, I obsess about these things if I don't feel they represent me, which is one of the nigthmares of being an artist - hence the struggle. For example, I made pottery for well over a year before I thought any of the mugs looked like what I wanted them to look like. They looked fine, and they looked like mugs, but they weren't the kind of mugs I wanted to make. In my opinion, one of the qualities you need to be an artist is to be extremely creative. I am not extremely creative, but I believe that everything in life can be learnt by grinding that level. So with inktober I wanted to force myself to think creatively every day, for a whole month, and see if that would level up my creativity. The how I don't like open ended projects because I think they lead to intellectual wankery instead of like, actually doing the thing, so I made up these rules for my weird art experiment: it had to be somehow about the sheriff of circle punch [1] it shouldn't take more than like, an hour it's fine if I skipped weekends [2] [1] Honestly the first day of inktober was a joke to make fun of the hashtag and my friend Fabian, who I troll with a circle punch any time I can. This of course ended up trolling me, because I did the whole fucking month afterwards, so ain't that the troller becoming the trollee. My friend Bushra came up with the name ("it's always howdy, never howthee"). Her inktober was way better ## CSS and SVG input animations DevFeed: [CSS and SVG input animations]() Original publisher: [Read original article]() Author: Stanko Published: 2018-08-22T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [SVG animations in CSS](), [ui]() Tags: [animations](), [css](), [svg](), [ui]() ### AI overview A personal showcase of CSS and SVG input animations created while experimenting with animations inspired by UI Movement mockups. ### Source excerpt Yesterday, one of my colleagues shared UI Movement website. It resulted in me playing with random animations trying to replicate mockups I liked. Here are the results: ## Slicing SVG 9 Ways DevFeed: [Slicing SVG 9 Ways]() Original publisher: [Read original article]() Author: Paul Lewis Published: 2016-08-30T00:00:00Z Content type: tutorial Language: en Sources: [Paul Lewis]() Topics: [SVG](), [CSS](), [SVG animations in CSS](), [Web Development]() Tags: [3d](), [challenges](), [css](), [explain](), [gpu](), [performance](), [responsive](), [series](), [svg](), [video](), [youtube]() ### AI overview This tutorial explains how to approach dynamically sized shadows for a 3D card flip in responsive web design. It compares CSS box-shadow and blur filters, focusing on editability, animation performance, and rendering costs. ### Source excerpt I recently made a 3D Card Flip element as part of my Supercharged YouTube video series, and I ran into some challenges with the shadows. I decided I should explain how I approached the solution. ## A Gulp-Based External SVG Symbol Sprite Icon System DevFeed: [A Gulp-Based External SVG Symbol Sprite Icon System]() Original publisher: [Read original article]() Published: 2016-01-26T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [SVG](), [Gulp](), [Design system](), [SVG animations in CSS](), [web design]() Tags: [css](), [design](), [design-systems](), [icons](), [svg](), [web-design]() ### AI overview This article presents a Gulp-based external SVG symbol sprite system for flexible web icon management. It explains why SVG icons are suitable for scalable, cacheable assets that can be restyled and edited with CSS, and describes the benefits and security constraints of using an external sprite. ### Source excerpt Icons are essential to most pattern libraries and web design systems. Let's take a look at a scalable approach! ## Fuco - A Coloring Game DevFeed: [Fuco - A Coloring Game]() Original publisher: [Read original article]() Author: Zoli Kahan Published: 2014-09-01T05:00:00Z Content type: article Language: en Sources: [Zolmeister]() Topics: [Web](), [Canvas](), [Cordova](), [iOS](), [SVG](), [SVG animations in CSS](), [Chrome](), [Firefox](), [LineageOS](), [Expo]() Tags: [amazon](), [android](), [animation](), [canvas](), [chrome](), [cordova](), [firefox](), [game](), [svg](), [web](), [webgl-shaders]() ### AI overview A developer describes Fuco, a coloring game created in 48 hours for the Ludum Dare game competition. The article explains its cross-platform, Cordova-based publishing approach, the HTML5 Canvas solution for erasing and masking colored regions, and an SVG logo animation used on the home screen. ### Source excerpt Fuco - A Coloring Game Web | Android | Chrome | Amazon | Firefox | Source Welcome, to Fuco (Source), a coloring game! Fuco was made in 48 hours as part of the Ludum Dare game compo. The theme was , which game me the inspiration for Fuco. Originally I had an idea for a game that mixed game art styles (pixel art + isometric + full 3D), however that was far too ambitious considering the time constraints and my artistic skills.