
You may have noticed some animated drawings on the site:

<Image src="/posts/animating-drawings/animated-drawing.svg" width="449" height="204"/>

This effect is surprisingly easy to do! All you need is a SVG-based drawing and an animation tool.

## Step 1: Create an SVG drawing

This is the hardest part. You need a tool that can produce a clean SVG file. I recommend the following:

**[Figma](https://figma.com)**: Web based, super clean and powerful, 🔥.

<Image src="/posts/animating-drawings/figma.png" width="829" height="623"/>

**[Sketch](https://www.sketch.com/)**: macOS, very similar to Figma

**[Concepts](https://concepts.app/en/)**: iPadOS, really powerful and produces clean SVGs.

<Image src="/posts/animating-drawings/concepts.jpg" width="967" height="688"/>

**[The Noun Project](https://thenounproject.com)**: This is more of a search engine for SVGs than a drawing tool, but you can find some excellent icons here.

<Image src="/posts/animating-drawings/noun-project.png" width="992" height="734"/>

## Step 2: Animate your SVG

The easiest way to do this is with the [Vivius Instant](https://maxwellito.github.io/vivus-instant/) web editor. This is a web-based tool that lets you quickly generate animated SVGs, no code required. I made the animation at the top with this tool.

If you want a little more control, you can use the [Vivus](https://maxwellito.github.io/vivus/) Javascript library. This gives you way more power, including programmatic trigger and per-layer control.

If you want to go real crazy, you should meet my friend [two.js](https://two.js.org/). This is a full-blown 2D drawing library, but it has built-in support for SVGs and lets you do cool things like [this](https://two.js.org/examples/animate-stroke.html):

<Video folder="animating-drawings" title="twojs" />

Turning SVG-based drawings into animations that can be embedded on a website, with different levels of control and effects.