6 ms·

SVG Line Animation for the Uninitiated

149 points by evandenn 10y ago

roadnottaken 10y ago
Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
- eridius 10y ago
  Because it's also displaying the CSS edits, so you can see the SVG animation that results from the corresponding CSS edit.
  - ricardobeat 10y ago
    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...
    - eridius 10y ago
      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.
- evandenn 10y ago
  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 10y ago
    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 10y ago
      They appear to be non-retina for me on iOS too.
- maxwellito 10y ago
  You can make independent animated SVGs with this tool : https://maxwellito.github.io/vivus-instant/ https://maxwellito.github.io/vivus-instant/
- bencroskery 10y ago
  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/ https://jakearchibald.com/2013/animated-line-drawing-svg/
amelius 10y ago
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.
- ygra 10y ago
  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.
  - deleted 10y ago
    [deleted]
- mxfh 10y ago
  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 10y ago
    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 10y ago
      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 10y ago
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/5o0yiO440LM/YGEJBsjUAwAJ https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0...
- pedalpete 10y ago
  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 10y ago
    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.
tkubacki 10y ago
"... Unfortunately Internet Explorer ..." Every piece of reality has its own IE - Unfortunately.
puzzles 10y ago
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.

149 points by evandenn 10y ago

roadnottaken 10y ago

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

eridius 10y ago
Because it's also displaying the CSS edits, so you can see the SVG animation that results from the corresponding CSS edit.
- ricardobeat 10y ago
  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...
  - eridius 10y ago
    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.
evandenn 10y ago
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 10y ago
  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 10y ago
    They appear to be non-retina for me on iOS too.
maxwellito 10y ago
You can make independent animated SVGs with this tool : https://maxwellito.github.io/vivus-instant/ https://maxwellito.github.io/vivus-instant/
bencroskery 10y ago
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/ https://jakearchibald.com/2013/animated-line-drawing-svg/

amelius 10y ago

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.

ygra 10y ago
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.
- deleted 10y ago
  [deleted]
mxfh 10y ago
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 10y ago
  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 10y ago
    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 10y ago

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/5o0yiO440LM/YGEJBsjUAwAJ https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0...

pedalpete 10y ago
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 10y ago
  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.

tkubacki 10y ago

"... Unfortunately Internet Explorer ..." Every piece of reality has its own IE - Unfortunately.

puzzles 10y ago

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.