How To Make Glitch / Static Effect SVG Animations With CSS And Filters

Published:

This can be done with embedded images, or for animated icons

Hi, today I'm going to make 2 SVG animations with pure CSS @keyframe animations, and SVG filter effects only.

One will use raster versions of the same images so I can use it as an opener for videos (PNG's, around 9 MB combined), and then add some sound effects to make it cooler. This one will look much better in some ways, but it's large size makes it slow for mobile devices.

The other will be pure SVG with a very small file size (around 45 kb, 1/200th the size). Side effects of this file size include erections lasting longer than 4 hours. Do not call your doctor. Proceed forward, and Godspeed.

Animating these without an existing library was necessary because I couldn't find anything to do EXACTLY what I wanted. Plus it makes the site run faster because users don't have to download an extra file to animate it if I choose to use the pure SVG version, nor do they have to download an extra font.

Here's how. Tally ho lads!

༼ຈل͜├┬┴┬┴ Pss! Hey kid, consider signing up to my email list and RSS feed, Brighteon / BitChute channels, or following me on my social medias.

--Kevin

Similar Posts

Most popular posts:

Stay updated with tips by subscribing to my rss 2 or atom 1 feeds, or signing up to my email list.

0 comments

There are no comments yet.

Add a new comment: