SVG Vectorial Graphics: Illustrate and Animate with Code

Overview

“A very striking and relatively simple effect is the fact of animating the edges of an illustration, giving the impression that it draws itself. Let's see how to do it.”

In this video lesson Javier Usobiaga Ferrer addresses the topic: Drawn animation, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.

Partial transcription of the video

“Well in this lesson we are going to do a very simple exercise that is to animate the edges of a drawing to give the impression of that it is self-drawing. Let's see how it works. The stroke animation or the stroke animation is quite popular in the world svg and is relatively easy to replicate. The main responsible of this animation are Stroke of dasharray or the possibility of a stroke, of which a border is discontinuous and the size of that discontinuation. And Stroke dash offset or the possibility that this stroke does not start until after so many pixels. Here we see a rectangle to which...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code

• Level: Beginner
• 98% positive reviews (271)
• 9106 students
• 7 units
• 32 lessons (2h 2m)
• 6 downloads

• Category

  Web & App Design

• Software

  Adobe Illustrator, Sketch

• Areas

  Animation, Interactive Design, Web Design, Web Development