SVG Line Animation for the Uninitiated | Hacker News Reader

SVG Line Animation for the Uninitiated

bitmatica.com

149 pointsevandenn20 comments

Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?

Because it's also displaying the CSS edits, so you can see the SVG animation that results from the corresponding CSS edit.

Could be done by embedding a codepen widget or anything similar.

Right now the page is full of fuzzy images, on a post about vector graphics and code...

That would let you modify the code, but it wouldn't demonstrate the author modifying the values and the corresponding CSS changes. You'd have to do all that yourself.

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!

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.

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

You can make independent animated SVGs with this tool : https://maxwellito.github.io/vivus-instant/

Here's one of the early svg drawing posts by Jake Archibald from a few years ago which is interactive: https://jakearchibald.com/2013/animated-line-drawing-svg/

"... Unfortunately Internet Explorer ..."

Every piece of reality has its own IE - Unfortunately.

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.

Not as such, no. The stroke in SVG has either a round or square end, but no arbitrary shape. Calligraphic strokes are usually represented by a filled path, which you cannot animate that way. SVG 2 also doesn't provide anything in that way. It's probably too much to ask to push path rendering with shaped brushes onto the renderer implementation when authoring tools can just as well create a filled path.

You might be able to achieve something like that with a filter, which could then rely on the underlying path being animated, but I'm not sure where to begin in that case, or whether it's possible.

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

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

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.

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.

Actually doing this in a project I'm working on right now. The solution is to use the pen vector as a clipPath over an underlying line which is animated to fill the calligraphy.

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...

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

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.

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.

Reply on news.ycombinator.com