Saturday, June 15

Tag: svg border-image

CSS Tricks

How to Animate a SVG with border-image

Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create the effect but to make it your own. Here’s what we’re making: Spooky skulls? Retro arcade? What’s not to like?! This is actually part of The Skull, a capture-the-flag riddle I’m working on that’s designed to explore the internals of Arduino and its microcontroller. I searched how to animate a border like this, but couldn’t find any useful examples. Most of the stuff I found was about marching ants, but unfortunately, the stroke-dasharray trick doesn’t work with skulls, let alone more complex shapes. So, in the spirit of learning and sharing, I’m blogging abo...