CSS | stroke-dasharray Property - GeeksforGeeks

21 Nov, 2019
The stroke-dasharray property is used to set the pattern of dashes and gaps used in the stroke of SVG shapes. A larger value indicates a larger number of dashes. Different values can be specified in the array parameter to change the pattern.
Syntax:
stroke-dasharray: <dasharray> | none
Property Values:
dasharray: It is used to set the pattern with a list of values separated by commas or white space. The values can be both in terms of length units or percentages that specify the dashes and gaps in the pattern.Example 1: Setting the density of the dashes in lines.<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 20;        stroke: green;      stroke-width: 20;    }      .stroke2 {      stroke-dasharray: 40;        stroke: red;      stroke-width: 20;    }      .stroke3 {      stroke-dasharray: 80;        stroke: orange;      stroke-width: 20;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:Example 2: Setting the density of the dashes in circles.<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 10;        stroke: green;      stroke-width: 20;    }      .stroke2 {      stroke-dasharray: 20;        stroke: red;      stroke-width: 20;    }      .stroke3 {      stroke-dasharray: 40;        stroke: orange;      stroke-width: 20;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:Example 3: Setting the pattern of the dashes.<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 20;        stroke: green;      stroke-width: 20;    }      .stroke2 {      /* pattern with even number      of values */       stroke-dasharray: 40 20;        stroke: red;          stroke-width: 20;    }      .stroke3 {      /* pattern with odd number      of values */       stroke-dasharray: 80 40 20;        stroke: orange;      stroke-width: 20;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:
Example 1: Setting the density of the dashes in lines.
<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 20;        stroke: green;      stroke-width: 20;    }      .stroke2 {      stroke-dasharray: 40;        stroke: red;      stroke-width: 20;    }      .stroke3 {      stroke-dasharray: 80;        stroke: orange;      stroke-width: 20;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:
Example 2: Setting the density of the dashes in circles.
<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 10;        stroke: green;      stroke-width: 20;    }      .stroke2 {      stroke-dasharray: 20;        stroke: red;      stroke-width: 20;    }      .stroke3 {      stroke-dasharray: 40;        stroke: orange;      stroke-width: 20;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:
Example 3: Setting the pattern of the dashes.
<!DOCTYPE html><html><head>  <title>    CSS | stroke-dasharray property  </title>  <style>    .stroke1 {      stroke-dasharray: 20;        stroke: green;      stroke-width: 20;    }      .stroke2 {      /* pattern with even number      of values */       stroke-dasharray: 40 20;        stroke: red;          stroke-width: 20;    }      .stroke3 {      /* pattern with odd number      of values */       stroke-dasharray: 80 40 20;        stroke: orange;      stroke-width: 20;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | stroke-dasharray  </b>  <div class="container">    <svg height="250px" width="500px"      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:
none: It is used to specify that no pattern would be used. It is the default value.
Supported Browsers: The browsers supported by stroke-dasharray property are listed below:
Chrome
Firefox
Safari
Opera
Internet Explorer 9
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript