
SVG Line Animation for the Uninitiated - evandenn
http://www.bitmatica.com/blog/svg-line-animation-for-the-uninitiated/
======
roadnottaken
Why are all the SVGs displayed as animated GIFs? Is there no way to display
native SVG animation in the browser?

~~~
evandenn
We're using Ghost as our blogging platform with deliberate constraints.
Constraints aside, if you notice throughout the article, I'm using Codepen to
help visualize the edits as I make them. This helps reinforce the concepts and
is pretty low friction. I also provide the link at the end so readers can
follow along. Thanks for reading!

~~~
ctrl-j
I would look at your scaling. When I saw this post on Medium, I didn't really
notice the gif-ness. On bitmatica.com it looks like everything is scaled &
blurred - which makes everything look out of focus.

~~~
tedmiston
They appear to be non-retina for me on iOS too.

------
tkubacki
"... Unfortunately Internet Explorer ..."

Every piece of reality has its own IE - Unfortunately.

------
amelius
Can this also be done with a calligraphic pen? (I.e., pen with a slanted
stroke).

I'm asking because this is a style that is used a lot in cartoons.

~~~
mxfh
You could create stroke-width-ratios by applying SVG transformations to each
path element, or groups of it.

Then you have to compensate for the introduced transformation in the stroke
path geometry itself.

Example:
[http://codepen.io/mxfh/pen/RopMvr](http://codepen.io/mxfh/pen/RopMvr)

Kind of hacky, but this could be automated by evaluating the stroke transforms
and applying the reverse transforms to source path geometry for compensation.

~~~
amelius
Wow, looks useful! I didn't realize that it could actually be that simple :)

But of course applying the inverse transform to arbitrary paths could still be
a tricky mathematical operation.

~~~
jacobolus
If you’re willing to use the canvas instead of SVG, it’s even easier. You can
draw the path in one coordinate system, then change the coordinate system for
the action of stroking the path, which will not change the location of the
path on screen but will let you effectively make the stroke into an arbitrary
ellipse.

------
mxfh
I kind of hate mixing SVG with CSS.

Somewhat relieved learn that SVG SMIL animations are staying in Chrome, for
now: [https://groups.google.com/a/chromium.org/d/msg/blink-
dev/5o0...](https://groups.google.com/a/chromium.org/d/msg/blink-
dev/5o0yiO440LM/YGEJBsjUAwAJ)

~~~
pedalpete
Can you elaborate on why? We use css to style images. I did an svg animation a
few weeks ago and used a mix of css and javascript. I find this much nicer

~~~
mxfh
Let's tone it done a bit and say it's a preference.

With SMIL including the animation as SVG elements just feels more right and
complete (like allowing animations along a path) to me.

------
puzzles
I'm working on a project right now where I'm using this technique, but there
is one thing that I've been wondering. Is there a way to make the line look
more hand-drawn, or faded in some way? I've tried using SVG Filters but I
can't seem to get it quite right.

