Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Animating SVG with CSS

Well done!

You have completed Animating SVG with CSS!

Sign up for Treehouse Back to Library

Animating stroke-dasharray and stroke-dashoffset

6:30 with Guil Hernandez

In this video, you will learn how to use the stroke-dasharray and stroke-dashoffset properties to create line animations.

CORRECTION: Creating an Animated Line Drawing

  • Add a stroke to the path
  • Set stroke-dasharray equal to the path's total length
  • Set stroke-dashoffset the same as stroke-dasharray
  • Animate stroke-dashoffset back to 0

Getting a path's total length using JavaScript

For example:

const path = document.querySelector('.logo');
const length = path.getTotalLength();

Quick Reference

Animated Line Drawing Examples

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    So, back in my style sheet, under the key frames comment flag, 0:00
    I'm going to create a new key frames rule, and I'll name the animation offset. 0:03
    This animation will animate the offset in a path stroke. 0:11
    In this rule, I'm only going to define one keyframe. 0:15
    A keyframe at 100%. 0:18
    At 100%, the stroke dash offset value will be set to zero. 0:20

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up