CSS Animation Archives - The NOKIA Blog

Smashing Animations Part 6: Magnificent SVGs With “ And CSS Custom Properties

Mister Nokia — Fri, 07 Nov 2025 15:00:00 +0000

SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.

I explained recently how I use , , and CSS Media Queries to develop what I call adaptive SVGs. Symbols let us define an element once and then use it again and again, making SVG animations easier to maintain, more efficient, and lightweight.

Since I wrote that explanation, I’ve designed and implemented new Magnificent 7 animated graphics across my website. They play on the web design pioneer theme, featuring seven magnificent Old West characters.

View this animated SVG on my website. (Large preview)

and let me define a character design and reuse it across multiple SVGs and pages. First, I created my characters and put each into a inside a hidden library SVG:

Then, I referenced those symbols in two other SVGs, one for large and the other for small screens:

Elegant. But then came the infuriating. I could reuse the characters, but couldn’t animate or style them. I added CSS rules targeting elements within the symbols referenced by a , but nothing happened. Colours stayed the same, and things that should move stayed static. It felt like I’d run into an invisible barrier, and I had.

Understanding The Shadow DOM Barrier

When you reference the contents of a symbol with use, a browser creates a copy of it in the Shadow DOM. Each instance becomes its own encapsulated copy of the referenced , meaning that CSS from outside can’t break through the barrier to style any elements directly. For example, in normal circumstances, this tapping value triggers a CSS animation:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

But when the same animation is applied to a instance of that same foot, nothing happens:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

That’s because the inside the element is in a protected shadow tree, and the CSS Cascade stops dead at the boundary. This behaviour can be frustrating, but it’s intentional as it ensures that reused symbol content stays consistent and predictable.

While learning how to develop adaptive SVGs, I found all kinds of attempts to work around this behaviour, but most of them sacrificed the reusability that makes SVG so elegant. I didn’t want to duplicate my characters just to make them blink at different times. I wanted a single with instances that have their own timings and expressions.

Several animated elements within a single SVG symbol. (Large preview)

CSS Custom Properties To The Rescue

While working on my pioneer animations, I learned that regular CSS values can’t cross the boundary into the Shadow DOM, but CSS Custom Properties can. And even though you can’t directly style elements inside a , you can pass custom property values to them. So, when you insert custom properties into an inline style, a browser looks at the cascade, and those styles become available to elements inside the being referenced.

I added rotate to an inline style applied to the content:

Then, defined the foot tapping animation and applied it to the element:

@keyframes tapping {
  0%, 60%, 100% { --foot-rotate: 0deg; }
  20% { --foot-rotate: -5deg; }
  40% { --foot-rotate: 2deg; }
}

use[data-outlaw="1"] {
  --foot-rotate: 0deg;
  animation: tapping 1s ease-in-out infinite;
}

Once I’ve set up a symbol to use CSS Custom Properties, I can pass as many values as I want to any instance. For example, I might define variables for fill, opacity, or transform. What’s elegant is that each instance can then have its own set of values.

use[data-outlaw="1"] {
  --eyelids-colour: #f7bea1; 
  --eyelids-opacity: 1;
}

use[data-outlaw="2"] {
  --eyelids-colour: #ba7e5e; 
  --eyelids-opacity: 0;
}

Support for passing CSS Custom Properties like this is solid, and every contemporary browser handles this behaviour correctly. Let me show you a few ways I’ve been using this technique, starting with a multi-coloured icon system.

When I need to maintain a set of icons, I can define an icon once inside a and then use custom properties to apply colours and effects. Instead of needing to duplicate SVGs for every theme, each use can carry its own values.

Custom properties for the fill colours in several Bluesky icons. (Large preview)

For example, I applied an --icon-fill custom property for the default fill colour of the in this Bluesky icon :

Then, whenever I need to vary how that icon looks — for example, in a

and

— I can pass new fill colour values to each instance:

These icons are the same shape but look different thanks to their inline styles.

Data Visualisations With CSS Custom Properties

We can use and in plenty more practical ways. They’re also helpful for creating lightweight data visualisations, so imagine an infographic about three famous Wild West sheriffs: Wyatt Earp, Pat Garrett, and Bat Masterson.

Data visualisations with CSS Custom Properties. (Large preview)

Each sheriff’s profile uses the same set of SVG three symbols: one for a bar representing the length of a sheriff’s career, another to represent the number of arrests made, and one more for the number of kills. Passing custom property values to each instance can vary the bar lengths, arrests scale, and kills colour without duplicating SVGs. I first created symbols for those items:

Each symbol accepts one or more values:

--career-length adjusts the width of the career bar.
--career-colour changes the fill colour of that bar.
--arrest-scale controls the arrest badge size.
--kill-colour defines the fill colour of the kill icon.

I can use these to develop a profile of each sheriff using elements with different inline styles, starting with Wyatt Earp.

Each shares the same symbol elements, but the inline variables change their colours and sizes. I can even animate those values to highlight their differences:

@keyframes pulse {
  0%, 100% { --arrest-scale: 1; }
  50% { --arrest-scale: 1.2; }
}

use[href="#arrests-badge"]:hover {
  animation: pulse 1s ease-in-out infinite;
}

CSS Custom Properties aren’t only helpful for styling; they can also channel data between HTML and SVG’s inner geometry, binding visual attributes like colour, length, and scale to semantics like arrest numbers, career length, and kills.

Ambient Animations

I started learning to animate elements within symbols while creating the animated graphics for my website’s Magnificent 7. To reduce complexity and make my code lighter and more maintainable, I needed to define each character once and reuse it across SVGs:

My website’s Magnificent 7 characters. (Large preview)

But I didn’t want those characters to stay static; I needed subtle movements that would bring them to life. I wanted their eyes to blink, their feet to tap, and their moustache whiskers to twitch. So, to animate these details, I pass animation data to elements inside those symbols using CSS Custom Properties, starting with the blinking.

I implemented the blinking effect by placing an SVG group over the outlaws’ eyes and then changing its opacity.

Blinking effect by animating eyelids’ opacity. (Large preview)

To make this possible, I added an inline style with a CSS Custom Property to the group:

Then, I defined the blinking animation by changing --eyelids-opacity:

@keyframes blink {
  0%, 92% { --eyelids-opacity: 0; }
  93%, 94% { --eyelids-opacity: 1; }
  95%, 97% { --eyelids-opacity: 0.1; }
  98%, 100% { --eyelids-opacity: 0; }
}

…and applied it to every character:

use[data-outlaw] {
  --blink-duration: 4s;
  --eyelids-opacity: 1;
  animation: blink var(--blink-duration) infinite var(--blink-delay);
}

…so that each character wouldn’t blink at the same time, I set a different --blink-delay before they all start blinking, by passing another Custom Property:

use[data-outlaw="1"] { --blink-delay: 1s; }
use[data-outlaw="2"] { --blink-delay: 2s; }

use[data-outlaw="7"] { --blink-delay: 3s; }

Foot tapping effect by animating the foot’s rotation. (Large preview)

Some of the characters tap their feet, so I added an inline style with a CSS Custom Property to those groups, too:

Defining the foot-tapping animation:

@keyframes tapping {
  0%, 60%, 100% { --foot-rotate: 0deg; }
  20% { --foot-rotate: -5deg; }
  40% { --foot-rotate: 2deg; }
}

And adding those extra Custom Properties to the characters’ declaration:

use[data-outlaw] {
  --blink-duration: 4s;
  --eyelids-opacity: 1;
  --foot-rotate: 0deg;
  animation: 
    blink var(--blink-duration) infinite var(--blink-delay),
    tapping 1s ease-in-out infinite;
}

Jiggling effect by animating the moustaches’ translation. (Large preview)

…before finally making the character’s whiskers jiggle via an inline style with a CSS Custom Property which describes how his moustache transforms:

Defining the jiggle animation:

@keyframes jiggle {
  0%, 100% { --jiggle-x: 0px; }
  20% { --jiggle-x: -3px; }
  40% { --jiggle-x: 2px; }
  60% { --jiggle-x: -1px; }
  80% { --jiggle-x: 4px; }
}

And adding those properties to the characters’ declaration:

use[data-outlaw] {
  --blink-duration: 4s;
  --eyelids-opacity: 1;
  --foot-rotate: 0deg;
  --jiggle-x: 0px;
  animation: 
    blink var(--blink-duration) infinite var(--blink-delay),
    jiggle 1s ease-in-out infinite,
    tapping 1s ease-in-out infinite;
}

With these moving parts, the characters come to life, but my markup remains remarkably lean. By combining several animations into a single declaration, I can choreograph their movements without adding more elements to my SVG. Every outlaw shares the same base , and their individuality comes entirely from CSS Custom Properties.

Pitfalls And Solutions

Even though this technique might seem bulletproof, there are a few traps it’s best to avoid:

CSS Custom Properties only work if they’re referenced with a var() inside a . Forget that, and you’ll wonder why nothing updates. Also, properties that aren’t naturally inherited, like fill or transform, need to use var() in their value to benefit from the cascade.
It’s always best to include a fallback value alongside a custom property, like opacity: var(--eyelids-opacity, 1); to ensure SVG elements render correctly even without custom property values applied.
Inline styles set via the style attribute take precedence, so if you mix inline and external CSS, remember that Custom Properties follow normal cascade rules.
You can always use DevTools to inspect custom property values. Select a instance and check the Computed Styles panel to see which custom properties are active.

Conclusion

The and elements are among the most elegant but sometimes frustrating aspects of SVG. The Shadow DOM barrier makes animating them trickier, but CSS Custom Properties act as a bridge. They let you pass colour, motion, and personality across that invisible boundary, resulting in cleaner, lighter, and, best of all, fun animations.

(gg, yk)

The post Smashing Animations Part 6: Magnificent SVGs With “ And CSS Custom Properties appeared first on The NOKIA Blog.

8 Autumn-Inspired CSS & JavaScript Effects

Mister Nokia — Mon, 08 Sep 2025 13:14:36 +0000

Every season has a distinct vibe. People celebrate them by wearing seasonal colors and delighting in traditional flavors. Autumn appears to have taken over as a favorite time of year for many. Pumpkin spice, anyone?

Yes, the fall season is being celebrated like never before – and for good reason. It’s when we embrace cooler weather, colorful leaves, and ugly sweaters. We’re also preparing for the upcoming holidays.

Naturally, web developers want to get in on the fun. They’re creating homages to the season that also show off their skills. They combine the latest in CSS and JavaScript with fun snapshots of fall life.

It all convinced us to collect some of the best autumn-inspired effects for your enjoyment. Their creativity will keep you cozier than a blanket and a warm cup of cider.

Virtual Autumn Corn Maze

Created by Kit Jenson

Nothing screams “autumn” like getting lost in a corn maze. This virtual maze challenges you to guide your pumpkin to safety. The game has a fun retro look and is powered by JavaScript. It’s also a more comfortable experience for those of us who are claustrophobic.

See the Pen Autumn Corn Maze by Kit Jenson (@kitjenson)
on CodePen.

Autumn Leaf Fall Preloader

Created by Nicolas

This snippet is proof that loading graphics don’t have to be boring. You can add seasonal flavor like this leaf animation. Watch as CSS animation spirals leaves into a virtual black hole.

See the Pen autumn leaf fall preloader by Nicola

Hexagonal Autumn Leaves Animation

Created by Philip Warkentien II

How about something a bit more abstract? This mesmerizing presentation uses SVG hexagon shapes to represent leaves. The fall color scheme is beautiful. And it’s hard to take your eyes off the sparkly animation.

See the Pen Autumn Leaves by Philip Warkentien II

Animated Glowing Spooky Spectral Ghost

Created by Filip Zrnzevic

We can’t forget about Halloween! The spooky season is well-represented by this glowing ghost presentation. Move your cursor and watch as the spirit follows you. WebGL and Three.js are the forces behind the animation – not magic.

See the Pen [webgl/threejs] ❍ Spooky Spectral Ghost by Filip Zrnzevic

Autumnal Sweater Weather

Created by McCambley

The chilly weather is a perfect excuse to dig out those old sweaters. You know, the ones with the wild patterns and scratchy fabric. Or, you might enjoy this garment built with CSS. The light-up diamonds are a nice touch.

See the Pen Sweater Weather by McCambley

Single Div CSS Pumpkin Spice Latte

Created by Greg Robleto

Pumpkin spice has become a phenomenon. Coffee shops pump out lattes before the first leaf hits the ground – and people can’t get enough. The flavor of the season is recreated here with a single DIV element. CSS gradients are used to create the various shading effects.

See the Pen Pumpkin Spice Latte – Single Div CSS Art (Divtober 2023 :Day 1 :Fall) by Greg Robleto

Falling Autumn Leaves Shader

Created by CeramicSoda

Raking leaves is perhaps the least popular autumn ritual. Watching them fall, on the other hand, is great fun. Here, you can shake a virtual tree and make the yellow-and-orange foliage fly. The best part? No cleanup!

See the Pen Falling autumn leaves shader by CeramicSoda

Snickers Bar Pure CSS

Created by Zerde Turdybek

Technically, you can eat a Snickers bar any time of the year. But there’s something special about receiving one when trick-or-treating. You can almost smell the chocolate and peanuts emanating from this CSS-rendered candy bar.

See the Pen Snickers by Zerde Turdybek

The Colors, Flavors, and Code of Fall

Web developers are always looking for a reason to build something fun. The colors and flavors of fall offer plenty of inspiration. The snippets above allow us to explore the season and sharpen our skills.

We hope you enjoyed this fresh harvest of autumn-themed code in all its glory! Please check out our CodePen collection for even more examples.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

8 Comic-Inspired Snippets Powered by CSS & JavaScript

Mister Nokia — Sun, 13 Apr 2025 16:54:13 +0000

Comics have served as an inspiration to many of us. They impact every corner of our culture. Just try going to the movies without at least one comic-based film showing. It seems nearly impossible.

Their style has also crept into web design. We see it in bold colors, outrageous typography, and unique layouts.

Advancements in both CSS and JavaScript allow designers to bring these styles to life. There is no shortage of ways to add comic-inspired flair to your website.

So, how are web designers bringing comic styles online? Let’s check out a few examples of what a combination of code and creativity can do.

Comic Style Text Bubbles – CSS

Created by Josetxu

This snippet demonstrates a classic comic book style. Large, bold text screams on top of colorful backgrounds. CSS Grid is used to line up the various layout pieces. Bonus: click on a word to edit the text. Wow! That was cool.

See the Pen Comic Style Text Bubbles – CSS by Josetxu

Side Scroller Comic Web Template

Created by Terry Scrimsher

Here’s an example that adds movement to the mix. The side-scrolling hero area makes for an attention-grabbing experience. The animated text provides contrast and an element of fun.

See the Pen Side Scroller Web Template by Terry Scrimsher

Comic Book Style CSS UI

Created by Gabriele Corti

This experiment ponders a comic book UI. It’s a small starting point inspired by Spider-Man. However, imagine expanding it to cover every element of a website. That’s a way to stand out from the mere mortals.

See the Pen Comic Book UI by Gabriele Corti

Style Stage Comic Book CSS

Created by Katherine Kato

Let’s go a step further with a comic-inspired UI. This page manages to balance bold styling and legibility. The layout is fun but remains super clean. It shows that “comic” doesn’t have to mean inaccessible.

See the Pen Style Stage – Comic by Katherine Kato

Pure CSS Comic Coder Cat

Created by Annie Bombanie

This humorous bit pokes fun at developers. It also shows some impressive use of CSS. The black-and-white comic takes advantage of clip paths, gradients, and flexbox. The strip is also responsive.

See the Pen Comic Coder Cat – Pure CSS by Annie

Generate Comic-Style Typography

Created by Antoinette Janus

Use this snippet to generate comic-style text. Click into the box and then start typing. You’ll get a classic comic book font on top of a halftone background.

See the Pen Comic Types by Antoinette Janus

Responsive & Accessible Comic Page

Created by Sarah Frisk

It can be a challenge to make an accessible comic strip. The fonts aren’t always legible. And what if you’re using images? This snippet aims to fix these issues. It offers a “CC” mode that provides text descriptions of each panel. The result is an improved user experience.

See the Pen Responsive and Accessible Comic Page by Sarah Frisk

Comic Style Crystal Field

Created by Tibix

It’s easy to admire the groundbreaking illustrations in our favorite comics. This example combines beautiful artwork with the power of code. Click on the presentation to regenerate a new version of this crystal field.

See the Pen Comic Style Crystal Field by Tibix

Adding Some Pop to the Web

Not every website requires a staid corporate look. Comic styles offer an alternative for these sites. You can use this technique to create a fun and memorable UX.

What’s more, you don’t have to go over the top to find success. Even subtle elements of comic design can make a positive impact. Look no further than some of the examples above for proof.

Want to see even more examples of comic styles? Use your superpowers and head on over to our CodePen collection!