I would like to learn how to make progressive hand-drawn animation (if it's not the correct term then it would be great if you could correct me).

This is the type of effect I am wanting to achieve. I did my research on the internet but couldn't find anything useful. The closest thing I could find was SVG stroke animation in the web browser I did however figure out a way to achieve this. The procedure is as follows:

  1. Use a software like Inkscape or Figma to draw a figure and export it as an SVG path.
  2. Next use the CSS properties stroke-dasharray and stroke-dashoffset and @keyframe to make the progressive effect.
  3. Use some JavaScript to automate this process if SVG figure has multiple <paths>.

This was fine to generate the animation, but I need it as a video file so that I can edit it with the rest of the video components. The downside with my aforesaid approach was:

  • Converting the HTML, CSS, JS animation to a video file is not easy. I found two ( not so effective ) ways to get around this problem:
    1. Add more CSS to make the animation cover the entire page, enter fullscreen mode, and use any screen-recording software to record the animation. ( Not efficient as screen recording lowers the quality and this relatively low-quality video when merged with the rest of the clip will only make it look odd. ) ...OR...
    2. Convert the HTML document to Canvas and use something like RecordRTC to record the canvas. ( Not efficient as its a quite tedious process )

Is there any other ( hopefully simpler ) way to achieve such animations? A vector-based approach would be better as I might need to scale up and down graphics quite a lot of times.

I am a complete beginner in animation and video editing so any help or guidance would be appreciated.

1 Answer 1


Blender is a free 3d modeling software that also does 2d drawing (and animation), which could create the same video you posted. Here's a good intro if your not familiar with Grease Pencil in Blender (multi-part series).

Here's a quick and to the point video for animating a Grease Pencil drawing, but takes for granite someone is alittle familiar with Blender.

  • Blender yes. Luckily I've been using it for a few years so learning grease pencil should be relatively easy. Thank you.
    – nltc
    Jan 2, 2022 at 7:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.