59

Infinite Repeating Dashed Lines in SVG

 5 years ago
source link: https://www.tuicool.com/articles/hit/2MVrMr6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

With a continuation of thelast blog post this time I’ll quickly show you how to do the repeating animations so that you can show off and flex your skills on a website.

VvauqiU.png!web

This isn’t necessary of a full tutorial. It’s best I show you a codepen that has the full source code.

See the Pen
by Maximilian Alexander ( @mbalex9 )

on CodePen .

Run Through

  1. To make a dashed line add a stroke-dasharray: 5; to your css. Feel free to play with the number: 
.dashed-line  {
  stroke-dasharray: 5;
}

<line class="dashed-line" x1="144" y1="84" x2="296" y2="84"/>
  1. To make the dashes move, add keyframes to your css. Again feel free to play with the value 1000 
@keyframes dash-animation {
  to {
    stroke-dashoffset: 1000;
  }
}

To make them move in the opposite direction, make sure the number is negative like so. I’ve put -1000 . 

@keyframes dash-animation {
  to {
    stroke-dashoffset: -1000;
  }
}

Now add 2 css classes, one for dashed animations to move to the left, the other one to move to right:

.dash-move {
  animation: dash-animation 20s infinite linear;
}

.dash-move-opposite {
  animation: dash-animation-opposite 20s infinite linear;
}

You’ll want to make sure you add the infinite and linear values to make sure it constantly repeats. Then add time to how often you want the keyframes to go for. In this example I’ve done 20s for 20 seconds.

  1. Now add the dash-move and dash-move-opposite to the lines. 
<line class="dashed-line dash-move" x1="144" y1="84" x2="296" y2="84"/>

This one has dash-move-opposite . The lines will move in the opposite direction. 

<line class="dashed-line dash-move-opposite" x1="144" y1="84" x2="296" y2="84"/>

Good Luck !


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK