<p><a href="https://www.blender.org/" rel="nofollow noreferrer">Blender</a> 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).
<div class="youtube-embed"><div>
                <iframe width="640px" height="395px" src="https://www.youtube.com/embed/7qZWW0k41WA?start=0"></iframe>
            </div></div></p>
<p>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.
<div class="youtube-embed"><div>
                <iframe width="640px" height="395px" src="https://www.youtube.com/embed/5uE-kR99in8?start=0"></iframe>
            </div></div></p>

CC BY-SA 4.0
2022-01-02T07:08:40.090Z
Blender yes. Luckily I've been using it for a few years so learning grease pencil should be relatively easy. Thank you.
nltc
CC BY-SA 4.0
2022-01-02T03:31:16.237Z
2022-01-02T03:31:16.237Z
SidewaysUpJoe
<p>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).</p>
<p><div class="youtube-embed"><div>
                <iframe width="640px" height="395px" src="https://www.youtube.com/embed/EoaDgUgS6QA?start=0"></iframe>
            </div></div></p>
<p>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 <a href="https://www.cassie.codes/posts/creating-my-logo-animation/" rel="nofollow noreferrer">SVG stroke animation in the web browser</a>
I did however figure out a way to achieve this. The procedure is as follows:</p>
<ol>
<li>Use a software like Inkscape or Figma to draw a figure and export it as an SVG path.</li>
<li>Next use the CSS properties <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> and <code>@keyframe</code> to make the <em>progressive</em> effect.</li>
<li>Use some JavaScript to automate this process if SVG figure has multiple <code>&lt;paths&gt;</code>.</li>
</ol>
<p>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:</p>
<ul>
<li>Converting the HTML, CSS, JS animation to a video file is not easy. I found two <em>( not so effective )</em> ways to get around this problem:
<ol>
<li>Add more CSS to make the animation cover the entire page, enter fullscreen mode, and use any screen-recording software to record the animation. <em>( 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. )</em> ...OR...</li>
<li>Convert the HTML document to Canvas and use something like <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" rel="nofollow noreferrer">RecordRTC</a> to record the canvas. ( Not efficient as its a quite tedious process )</li>
</ol>
</li>
</ul>
<p>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.</p>
<p>I am a complete beginner in animation and video editing so any help or guidance would be
appreciated.</p>

<animation><recommendation>
how to make progressive hand drawn animation
nltc
# how to make progressive hand drawn animation

(Asked by: username_0 on 2022-01-01)

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](https://www.cassie.codes/posts/creating-my-logo-animation/)
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 .

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](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/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.

**Tags:** animation, recommendation


---

## 1 answers

### Answer by username_1 on 2022-01-02. Score: 0 | Accepted answer

[Blender](https://www.blender.org/) 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.

> **Comments:**
> **username_0**: Blender yes. Luckily I've been using it for a few years so learning grease pencil should be relatively easy. Thank you.  

---

