Skip to content

Instantly share code, notes, and snippets.

@basilesimon

basilesimon/dashed-line.html

Created January 10, 2017 11:20
Show Gist options
  • Save basilesimon/97458fc349ef40c6aac37ed92396ed2d to your computer and use it in GitHub Desktop.
Save basilesimon/97458fc349ef40c6aac37ed92396ed2d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dashed-line.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Animate Dashed line - based off http://css-tricks.com/svg-line-animation-works
-->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M21.272,244.225c0,0,122.45-69.388,204.762,0
s82.993,13.605,148.299,10.204s259.865,13.605,246.939-31.292s85.033-67.347,95.918-51.701s61.905,88.435,127.892,70.748
s97.959-10.884,97.959-10.884"/>
<path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M21.272,244.225c0,0,122.45-69.388,204.762,0
s82.993,13.605,148.299,10.204s259.865,13.605,246.939-31.292s85.033-67.347,95.918-51.701s61.905,88.435,127.892,70.748
s97.959-10.884,97.959-10.884"/>
</svg>
</body>
<style>
.dashed{
stroke-dasharray: 10;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment