SVG Line Animation for the Uninitiated
bitmatica.com
SVG Line Animation for the Uninitiated
1–10 of 22 posts
Re: SVG Line Animation for the Uninitiated
#2Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
Re: SVG Line Animation for the Uninitiated
#3Can 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.
Re: SVG Line Animation for the Uninitiated
#4Why 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.
Re: SVG Line Animation for the Uninitiated
#5Why 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...
Re: SVG Line Animation for the Uninitiated
#6Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
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!
Re: SVG Line Animation for the Uninitiated
#7Can 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.
Re: SVG Line Animation for the Uninitiated
#8I 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...
Re: SVG Line Animation for the Uninitiated
#9Can 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 a…
[deleted]
Re: SVG Line Animation for the Uninitiated
#10Why are all the SVGs displayed as animated GIFs? Is there no way to display native SVG animation in the browser?
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.