PUBLIC MARKS from decembre with tags svg & demo

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Main features Keyframes: Chain multiple animation properties. Timeline: Synchronize multiple instances together. Playback controls: Play, pause, restart, seek animations or timelines. CSS transforms: Animate CSS transforms individually. Function based values: Multiple animated targets can have individual value. SVG Animations: Motion path, line drawing and morphing animations. Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

SVG at a data URI for background images.... just because you can, doesn't mean you should.

Another Use Case: The fill property is one of many reasons SVG is a much more flexible option than typical image files. Let's take icons, as an example. We might have the same set of icons but in two different color schemes. Typical image files (such as JPG, PNG and GIF) would require us to make two versions of each icon — one for each color scheme. SVG, on the other hand, allows us to paint the icons in using the CSS fill property: .icon { fill: black; } .icon-secondary { fill: orange; }