The Mystery Unravels
So, I am gettin’ my geek on and keeping true to my goal of making SVG’s more fun to look at. I so want to take advantage of their flexibility, and my penchant for B&W intricate stuff and animation. This ball of twine I SVG’d seemed like the best place to start. A ton of line data, and all the flexibility of easy to read code.
So without further adieu, here’s a little stroke animation attempt – in fact my first animation attempt – totally from scratch, with only a smidge of CSS and generous helping of original SVG line art.
Enjoy!
Animation not happenin’? Click it first, and if that doesn’t do the trick, you might just want to upgrade that there browser of yours.
How did I do it, you say? With only these lil’ tidbits of CSS swirled into the top of the SVG file (edited in any Text Editor). I wrote a little code about it, here it go:
.twine {
stroke-dasharray: 700;
stroke-dashoffset: 0;
-webkit-animation: dash 24s ease-in-out both; /* Chrome, Safari, Opera */
animation: dash 24s ease-in-out both;
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1400;
}
}
@-moz-keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1400;
}
}
@-o-keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1400;
}
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1400;
}
}
If you dig it, please feel free to leave a comment or Q. Thanks!
