Tag Archives: stimpygato

Still going strong with the SVGs

So, I’ve been absent from posting to this page awhile, but here’s the scoop. I’m still Web Dev’ing and getting my SVG on. Just not as frequently as I want… mostly due to life not giving me enough hours in a day, and my post-40yo brain taking way too long to commit new code to rote.

Do you enjoy? I hope so. CodePen is teh b3st!

See the Pen Hex You SVG Animation by Noel Sufrin (@stimpygato) on CodePen.21121

Again with the SVGs

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!

My First SVG Animation

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!