Food4Thoth

Animate single img gradient glow border with CSS + SVG filter enhancement

A Pen created on CodePen.io. Original URL: https://codepen.io/thebabydino/pen/bGPMOpJ.

Got the idea after seeing this and thought a lot of it could be simplified.

For example, these 6 declarations are completely unnecessary:

width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 3px

inset: -3px, a single declaration instead of six, achieves the exact same thing.

Writing the from keyframe is also unnecessary, since the angle is given an initial-value of 0deg in the @property block. So the from keyframe can be omitted and it gets auto-generated from the initial-value in the @property block.

I then also had the idea of enhancing this to both make it work for img elements (which can’t have pseudos) and make the animated glowy border more interesting by rounding one or both ends, creating a tail, making the glow grainy…

… so enter the SVG filter enhancement version you see here! No pseudos!

---

If the work I’ve been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:

• being a cool cat 😼🎩 and becoming a patron on Patreon

• making a one time donation via Ko-fi

• making a weekly anonymous donation via Liberapay

• getting me something off my Amazon WishList

🎁 🇺🇸 / 🎁 🇬🇧

• or at least sharing this to show the world what can be done with CSS these days

Thank you!