how to make progressive hand drawn animation

Question

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.

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.