SVG stroke-dasharray and stroke-dashoffset

Understanding how to create dashed lines in SVG is essential if you want to create custom shapes or patterns. Two key properties control how dashed strokes work: stroke-dasharray and stroke-dashoffset. Let's explore how these properties work and how they interact with each other.

What is stroke-dasharray?

The stroke-dasharray property defines the pattern of dashes and gaps used to paint the outline of a shape. It accepts a list of comma-separated values that specify the lengths of alternating dashes and gaps.

<!-- A simple dashed line -->
<line x1="0" y1="25" x2="200" y2="25"
      stroke="black"
      stroke-width="2"
      stroke-dasharray="5,5" />

In this example, stroke-dasharray="5,5" creates a repeating pattern where each dash is 5 units long, followed by a 5-unit gap.

Different Pattern Examples

You can create various patterns by providing different values:

<!-- Long dash, short gap -->
<line stroke-dasharray="20,5" />

<!-- Long dash, short gap, short dash, short gap -->
<line stroke-dasharray="20,5,5,5" />

<!-- Multiple different lengths -->
<line stroke-dasharray="15,3,5,3,5,3" />

<!-- Odd number of values -->
<line stroke-dasharray="10,5,2" />

<!-- Just one value (dash and gap are equal) -->
<line stroke-dasharray="10" />

Key Rules:

• If an odd number of values is provided, the list is repeated to make an even number
• stroke-dasharray="5" becomes stroke-dasharray="5,5"
• stroke-dasharray="10,5,2" becomes stroke-dasharray="10,5,2,10,5,2"

What is stroke-dashoffset?

The stroke-dashoffset property specifies where to start the dash pattern along the path. Think of it as "shifting" the entire dash pattern along the stroke.

<!-- No offset -->
<line x1="0" y1="20" x2="200" y2="20"
      stroke="black"
      stroke-dasharray="20,10"
      stroke-dashoffset="0" />

<!-- Offset by 10 units -->
<line x1="0" y1="50" x2="200" y2="50"
      stroke="black"
      stroke-dasharray="20,10"
      stroke-dashoffset="10" />

<!-- Offset by 20 units -->
<line x1="0" y1="80" x2="200" y2="80"
      stroke="black"
      stroke-dasharray="20,10"
      stroke-dashoffset="20" />

How stroke-dashoffset Works

• Positive values: Move the pattern backwards (to the left)
• Negative values: Move the pattern forwards (to the right)
• Zero: No offset (default behavior)

The offset value "shifts" where the dash pattern begins. If you have a pattern of 20,10 (20-unit dash, 10-unit gap) and set stroke-dashoffset="10", the pattern starts 10 units into what would normally be the first dash.

Interactive Example

Practical Applications

Dashed Borders: Create custom border styles that aren't possible with CSS alone.

Technical Diagrams: Use different dash patterns to represent different types of connections or boundaries.

Design Elements: Add visual variety to illustrations and graphics.

User Interface: Create distinctive visual separators and dividers.

With this knowledge, you can create an arc like you usually find on countdown timers by incorporating some math. The slider max value below represents the circumference of the circle.

Browser Support

Both stroke-dasharray and stroke-dashoffset have excellent browser support, working in all modern browsers including IE 9+. They're part of the SVG 1.1 specification and are widely supported across different platforms.