Simple SVG drawing effect with `stroke-dasharray` & `stroke-dashoffset`
Tags: svg, css, animation
Published: 2020-07-04 09:33:46

---
title: Simple SVG drawing effect with `stroke-dasharray` & `stroke-dashoffset`
published: true
description: Simple drawing animation with SVG & CSS
tags: svg, css, animation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0vxf7dbnrbxyjjk3ieeo.png
canonical_url: https://www.paulryancodes.com/blog/simple-svg-drawing-effect-with-stroke-dasharray-amp-stroke-dashoffset
---

If you prefer video format you can [head here](https://www.youtube.com/watch?v=0_mUQBvi7cQ).

Hey everyone, I hope you are having a great day!

Today I am going to show you how to do a simple SVG drawing effect with `stroke-dasharray` and `stroke-dashoffset`.

So take the following SVG path:
```html
<svg width="400" height="100" viewBox="0 0 400 100">
  <path 
        d="m 0 0 h 300" 
        stroke="black" 
        pathLength="10"
        stroke-width="15"></path>
</svg>
```

Visually, that gives us:
![The SVG Path](https://dev-to-uploads.s3.amazonaws.com/i/v8alnuuifkgy0vbvs0ul.png)

So this has a `stroke` of `black` which is a continuous black line, we can split this up into dashes using `stroke-dasharray`.  Our path has a `pathLength` of `10`, if we set `stroke-dasharray` to `2`, that means we will split our path into `dashes` of `2`.

This is how the `path` will look.
![Dash & Path](https://dev-to-uploads.s3.amazonaws.com/i/jvpob2tdkymnugi8iojz.png)

So each `dash` has `width` of `2` and each `gap` has a width of `2` so `10/2 = 5`.

If we wanted to start on a `gap` rather than `dash`, we can use the `stroke-dashoffset` attribute and set it to a value of `2`.
![Path starting with a GAP](https://dev-to-uploads.s3.amazonaws.com/i/w44dqyhuy71zno6n3iwb.png)

Cool, setting the `stroke-dashoffset` to the same value as `stroke-dasharray` will **offset** the gap or dash.

Using this knowledge, we can create a drawing effect.  To achieve this, the first thing we do is set `stroke-dasharray` to the same `length` of the path which is `10`.  Visually this will make no change, but we can use `stroke-dashoffset` to start on a `gap`, like above we simply set this to the same value of `stroke-dasharray` which is `10`.

```html
<svg width="400" height="100" viewBox="0 0 400 100">
  <path pathLength="10" d="m 0 0 h 300" stroke="black" stroke-width="15"></path>
</svg>
```

```css
path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
}
```

This will render a blank screen as we are starting on a `gap` that is the same `length` of our **entire path**.

Using some basic CSS, we can create a drawing animation, we simply want to animate the `stroke-dashoffset` from the value of `10` to the value of `0`.

```css
path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 10;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}
```

This gives us the following:
![Line Animation](https://dev-to-uploads.s3.amazonaws.com/i/dtchmy6zpf026ze74w6k.gif)

Nice!

Here is the [Codepen](https://codepen.io/PaulRyan17/pen/eYJVYaQ) you can play around with or fork.

Any questions on the above, feel free to contact me on my socials! :heavy_heart_exclamation:
 
| :guardsman: [Insta](https://www.instagram.com/paulryancodes/) | :eyes: [Twitter](https://twitter.com/PaulRyan7) | :speech_balloon: [Github](https://github.com/PaulRyan17) | :thought_balloon: [LinkedIn](https://www.linkedin.com/in/paulryan9/) | :collision: [Youtube](https://www.youtube.com/channel/UCf4AtM9ldMfBsO0_bbYWvfw?view_as=subscriber) |:mailbox_with_no_mail: [Website](https://www.paulryancodes.com/)
| -- |--| --| -- | -- | -- |