Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A neato, animated squiggly line that could repeat horizontally.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" viewBox="0 0 20 4">
<path fill="none" stroke="#000000" stroke-width="1" class="st0" d="M0,3.5 c 5,0, 5, -3, 10, -3 s 5,3, 10, 3 c 5,0, 5, -3, 10, -3 s 5,3, 10, 3"/>
<style type="text/css">
.st0 {
animation: shift 0.3s linear infinite;
}
@keyframes shift {
from {
transform: translateX(0);
}
to {
transform: translateX(-20px);
}
}
@media (prefers-reduced-motion: reduce) {
.st0 {
animation: none;
}
}
</style>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment