"... Unfortunately Internet Explorer ..."
Every piece of reality has its own IE - Unfortunately.
SVG Line Animation for the Uninitiated
11–20 of 22 posts
Re: SVG Line Animation for the Uninitiated
#12Earlier quoted context omitted.
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.
Re: SVG Line Animation for the Uninitiated
#13Can 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.
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.
Re: SVG Line Animation for the Uninitiated
#14I'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.
Re: SVG Line Animation for the Uninitiated
#15I 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
Re: SVG Line Animation for the Uninitiated
#16Earlier quoted context omitted.
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.
Re: SVG Line Animation for the Uninitiated
#17I 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.
Re: SVG Line Animation for the Uninitiated
#18Can 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.
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.
Re: SVG Line Animation for the Uninitiated
#19Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
You can make independent animated SVGs with this tool : https://maxwellito.github.io/vivus-instant/
Re: SVG Line Animation for the Uninitiated
#20Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
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/