Do it yourself using the aforementioned CSS/Sass, or take a shortcut by using a plugin like Animate.CSS. It contains ready-to-use utility classes for common animations, such as fades, slides, shake, and many more.

What if I told you there was an image format like GIF, but it worked with vectors? What if I said it was possible to reverse the direction of its animation? What if you could take one base image and animate different parts of it separately, at different speeds? Well, the image format, SVG, already exists. It just needs a little gentle encouragement.

One my prefered playgrounds is SVG. It is Scalable Vector Graphics, which in practice means that you can draw something in the browser using some tags, some stying and some code. How cool is that? Compared with a piece of paper and a pen you can go crazy and the result is generated instantly as you change the elements of your playground in your pen on CodePen.

Chris Gannon:
Personally I prefer and use the Asset Export panel. It's quicker, produces cleaner SVGs and is more flexible (drag and drop several assets and it will export them all separately; drag and alt-drop several assets and it will export them as one).

Each of these illustrations contains the title/name of a membership. There are no actual titles in the HTML to represent these memberships otherwise, which means that the text in each image is the title of that particular membership. This, in turn, means that this text needs to be as searchable, selectable and accessible as real (HTML) text.

In other words, the text inside the images needs to remain real text and not be converted to outlines, for starters. SVG text — wrapped in elements within an

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.

https://jakearchibald.github.io/svgomg/

Everybody loves the vintage game Pong, right? We sure do. What's more fun? Building it yourself!

That's why we decided to create one with SVG.js - to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you'll see, it's simpler than it sounds. Let's dive into it!

SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.

The following article covers a large swath of SVG animation tips and resources for web designers. You’ll learn how SVG images are created and why they’re fantastic for use on the web. You’ll also find a collection of SVG animation tutorials and open source code to help new designers come to terms with building unique SVG animations from scratch.