Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-01-02T07:08:40.090Z
Answers.Text: Blender yes. Luckily I've been using it for a few years so learning grease pencil should be relatively easy. Thank you.
Answers.UserDisplayName: nltc
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-01-02T03:31:16.237Z
Answers.LastActivityDate: 2022-01-02T03:31:16.237Z
Answers.UserDisplayName: SidewaysUpJoe
Body: <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>
  
Tags: <animation><recommendation>
Title: how to make progressive hand drawn animation
UserDisplayName: nltc
ThreadText: # 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 `<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](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.  
  
  ---
  
  