path-length CSS property

Syntax

/* Keywords */
path-length: none;

/* <length> values */
path-length: 0;
path-length: 70;
path-length: 500;

/* Global values */
path-length: inherit;
path-length: initial;
path-length: revert;
path-length: revert-layer;
path-length: unset;

Values

none

No author path length is specified and the user agent's own computed path length is used for all path-related calculations.

<length>

A non-negative unitless value representing an author-defined total path length, in user units.

Formal definition

Formal syntax

path-length = 
  none                |
  <length> [ 0 , ∞ ]  

Examples

Basic usage

This example defines a path and shows how to apply a path length to it using the path-length CSS property.

SVG

Our SVG defines a single curved <path> element with a colored stroke. It includes a stroke-dasharray attribute that defines a regular dashed pattern for the stroke.

<svg viewBox="0 0 600 200">
  <path
    d="M 30 100 C 150 20, 250 180, 380 100 S 520 20, 570 100"
    fill="none"
    stroke="#D85A30"
    stroke-width="4"
    stroke-dasharray="24 24"></path>
</svg>

CSS

We set a path-length value on the <path>:

path {
  path-length: 500;
}

Results

Setting a large path-length value results in the dashes becoming smaller and more frequent.

Animating path-length

One major advantage of making path-length available as a CSS property is that you can apply standard CSS functionality such as animations and transitions to it. This example builds on the previous one, showing how to animate a path-length with a CSS animation.

HTML and SVG

This example includes the same SVG <path> as the previous one. In addition, it includes an <input type="range"> element that can be used to change the value of path-length applied to the <path> at runtime. We also include an <output> element to display the current slider value.

<div>
  <label for="path-slider">Adjust path-length</label>
  <input type="range" min="0" max="800" value="200" />
  <output>200</output>
</div>

CSS

On the :root element, we define a CSS custom property called --path-length and give it an initial value of 200. We then set the <path> element's path-length value to the --path-length property, and set an animation on it that runs an infinite number of times and alternates between forwards and backwards.

:root {
  --path-length: 200;
}

path {
  path-length: var(--path-length);
  animation: path-length-anim 2s alternate infinite ease-in-out;
}

div {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

Next, we define the @keyframes block for the animation — it animates the path-length property between the --path-length value and the --path-length value multiplied by 1.5.

@keyframes path-length-anim {
  from {
    path-length: var(--path-length);
  }

  to {
    path-length: calc(var(--path-length) * 1.5);
  }
}

JavaScript

We start our script by grabbing references to the <input type="range">, <output>, and :root elements.

const slider = document.querySelector("input");
const output = document.querySelector("output");
const rootElem = document.querySelector(":root");

Next, we add an input event handler to the range slider so that, when its value is changed, the <output> element's textContent and the value of the --path-length custom property are set to equal the slider's new value.

slider.addEventListener("input", () => {
  output.textContent = slider.value;
  rootElem.style.setProperty("--path-length", slider.value);
});

Results

Adjust the slider, and note how larger values rules in a smaller dash size.

Specifications

Browser compatibility

See also

• SVG pathLength attribute
• Presentation properties: fill, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, marker-end, marker-mid, marker-start, path-length, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, and vector-effect