Demos

Animated Flag
animated rotation


Pulse Animation
combined animations: scale + opacity

Animated Gradient Text
animated fill

Progress Bar
animated motion

How it Works
img tags support .svg files as well, which is a format for vector graphics (meaning it stores lines and shapes rather than pixels). One of the nifty things about SVG files is that they can be animated in a variety of different ways.

Imgur (and most image hosts) don't support SVG hosting, so the demo images in this post are uploaded to GitHub. Other than that, the syntax is the same. For example, try out this one:

Code	Result
Code: [img]https://upload.wikimedia.org/wikipedia/commons/b/be/Animated_SVG_clock_grey.svg[/img]

For the more technically inclined, you can find more information on how to add animation code to your SVGs here. Displaying SVGs with the <img> tag has 96.54% browser support, and the SVG animation features have 94.77% browser support, at the time of writing.

Esfalsa | NationStates | Wiki | Roleplay | Discord

(This post was last modified: 05-12-2022, 11:36 AM by Pronoun.)

Reply

I just have to say that that progress bar is so cute and cool at the same time!!

Reply