CSS stroke-dashoffset Property

Last Updated : 08 Jun, 2023

The stroke-dashoffset property is used to set the location along an SVG path where the dash pattern of a stroke will begin. A higher value means that the dash will start at a further location.

Syntax:

stroke-dasharray: <length> | <percentage>

Property Values:

length: It is used to set the offset in length units. The values are resolved on the basis of the path length of the element.
percentage: It is used to set the offset in percentage values. The values are resolved as a percentage of the current viewport.

Example 1: Setting the offset of the dashes in lines.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dashoffset
    </title>
    <style>
        .stroke1 {
            stroke-dashoffset: 0;
 
            stroke: green;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
 
        .stroke2 {
            stroke-dashoffset: 15px;
 
            stroke: red;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
 
        .stroke3 {
            stroke-dashoffset: 30px;
 
            stroke: orange;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dashoffset
    </b>
    <div class="container">
        <svg width="400px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <line class="stroke1" x1="0"
                x2="350" y1="20" y2="20" />
            <line class="stroke2" x1="0"
                x2="350" y1="70" y2="70" />
            <line class="stroke3" x1="0"
                x2="350" y1="120" y2="120" />
        </svg>
    </div>
</body>
</html>

Output:

using-lines

Example 2: Setting the offset of the dashes in circles.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dashoffset
    </title>
    <style>
        .stroke1 {
            stroke-dashoffset: 0;
 
            stroke: green;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }
 
        .stroke2 {
            stroke-dashoffset: 15px;
 
            stroke: red;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }
 
        .stroke3 {
            stroke-dashoffset: 30px;
 
            stroke: orange;
            stroke-dasharray: 40;
            stroke-width: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dashoffset
    </b>
    <div class="container">
        <svg width="500px"
             height="250px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="stroke1"
                  cx="100" cy="100" r="50" />
            <circle class="stroke2"
                  cx="250" cy="100" r="50" />
            <circle class="stroke3"
                  cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>
</html>

Output:

using-circles

Example: Setting the offset of the dashes in lines.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dashoffset
    </title>
    <style>
        .stroke1 {
            stroke-dashoffset: 0%;
 
            stroke: green;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
 
        .stroke2 {
            stroke-dashoffset: 50%;
 
            stroke: red;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
 
        .stroke3 {
            stroke-dashoffset: 100%;
 
            stroke: orange;
            stroke-dasharray: 40;
            stroke-width: 20px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dashoffset
    </b>
    <div class="container">
        <svg width="400px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <line class="stroke1" x1="0"
                x2="350" y1="20" y2="20" />
            <line class="stroke2" x1="0"
                x2="350" y1="70" y2="70" />
            <line class="stroke3" x1="0"
                x2="350" y1="120" y2="120" />
        </svg>
    </div>
</body>
</html>