Thread by @vponamariov

How to make this with CSS only 👇

1 / 8

First, you need an SVG that has TWO parts:

- Line
- Arrow

For drawing such curves you can use any vector editor. I used @sketch.

Tutorial on how to do this: sketch.com/docs/vector-ed…

Arrow is a simple triangle.

2 / 8

Next, after you exported SVG, you can go to jakearchibald.github.io/svgomg/ in order to remove clutter from the SVG.

Btw, this is a nice hint: you can significantly reduce the size of SVG by using this awesome tool from @jaffathecake

3 / 8

Now you have something similar to this.

1. Add classes to the line (path in my example) and triangle
2. Add fill-opacity="0" for triangle

In CSS the only thing you need so far is:

.path {
stroke-dasharray: 8;
}

That makes the line dashed.

4 / 8

Now, the trickest part.

In order to have an animated dashed line, you need to duplicate (!) the line path and make it a mask.

Check the code below.

Now we have:

1. Mask
2. Line
3. Triangle

5 / 8

The actual animation is done via changing the `stroke-dasharray` property.

Check it out: developer.mozilla.org/en-US/docs/Web…

But we will animate MASK, not the initial line path.

6 / 8

After the animation completed, we need to show the arrow (triangle).

For this purpose, we will change the `fill-opaicty` from zero to 100%.

Pay attention to animation-fill-mode, without this the triangle will disappear after the first animation attempt.

7 / 8

Now, a slight improvement can be done by changing the animation timing function from linear to something more aesthetical.

1. Go here easings.net
2. Select a proper timing function that you like
3. Update the mask animation property

8 / 8

The rest is making the background, adding the button, and all that boring stuff.

Completed example with code: codepen.io/akcium/pen/GRr…

!! Don't forget to change the layout in Codepen, since I used position absolute