Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

stroke-dashoffset Redirect 1

« SVG Attribute reference home

the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash.

If a <percentage> is used, the value represents a percentage of the current viewport.

Values can be negative.

Usage context

Categories Presentation attribute
Value <percentage> | <length> | inherit
Initial value 1
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Use stroke-dashoffset to animate SVG

SVG:

<path fill="none" stroke="deeppink" stroke-width="14" stroke-miterlimit="0" 
d="M11.6 269s-19.7-42.4 6.06-68.2 48.5-6.06 59.1 12.1l-3.03 28.8 209-227s45.5-21.2 60.6 1.52c15.2 22.7-3.03 47-3.03 47l-225 229s33.1-12 48.5 7.58c50 63.6-50 97-62.1 37.9" />

JavaScript

var path = document.querySelector('.squiggle-animated path'); 
var length = path.getTotalLength(); 

// Clear any previous transition 
path.style.transition = path.style.WebkitTransition = 'none'; 

// Set up the starting positions 
path.style.strokeDasharray = length + ' ' + length; 
path.style.strokeDashoffset = length; 

// Trigger a layout so styles are calculated & the browser 
// picks up the starting position before animating 
path.getBoundingClientRect(); 
// Define our transition 
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out'; 

// Go! 
path.style.strokeDashoffset = '0';

Elements

The following elements can use the stroke-dashoffset attribute

Document Tags and Contributors

 Last updated by: Sheppy,