CSS Stroke Dasharray Patterns Work

Published on : July 22,2022

This article will learn about CSS Stroke Dasharray Patterns Work. Let's Start…

If you need a line in SVG:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

Also, you can use the stroke-dasharray property in CSS to make dashes:

line {
  stroke-dasharray: 5;
}

That 5 value is a relative unit based on the size of the SVG’s viewBox. We could use any CSS length, really. But what it does is make a pattern of dashes that are 5 units long with 5 unit gaps between them.

HTML :

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

Extra CSS :

line {
  stroke: #f8a100;
  stroke-dasharray: 5;
}

/* DEMO STYLES */
body {
  background: #333;
  display: grid;
  place-items: center;
  width: 100%;
}

svg {
  fill: #333;
  stroke-color: red;
  stroke-width: 5px;
}

Result :

Hope it can help you…

Categories : CSS

Tags : HTML CSS

Praful Sangani

I'm a passionate full-stack developer with expertise in PHP, Laravel, Angular, React Js, Vue, Node, Javascript, JQuery, Codeigniter, and Bootstrap. I enjoy sharing my knowledge by writing tutorials and providing tips to others in the industry. I prioritize consistency and hard work, and I always aim to improve my skills to keep up with the latest advancements. As the owner of Open Code Solution, I'm committed to providing high-quality services to help clients achieve their business goals.