Let lines simultaneously been drawn

[tylerdurden]

Will do!

[Xav]

(May I ask what you kind of animation you built, Xav?)

Nothing worth mentioning. I first came across this technique a few years ago, played with it very briefly to check I'd understood it correctly, and filed it under "things to cover when I get on to web stuff in my tutorials". At the time I didn't expect it would take over 6 years of tutorials before I got onto web stuff.

With your extension I've only created a test file, with a couple of stars, and some text converted to paths then joined with "combine". There's really nothing to share that hasn't now been bettered by TD's creations.

[Moini]

@Xav Ah, okay. I thought you've been following some really different concepts, because you understood the extension's purpose differently, so I was curious to see what else one might want to do with it.

[Moini]

If you haven't read yet, Tav is trying to help getting animation of the path with CSS into the SVG spec:

https://www.patreon.com/posts/biweekly-update-16995867
(just found it)

[Moini]

(and meshes and hatch fills are no longer in the draft for SVG 2.0 - but they are *in* the draft for 2.1)

[Xav]

@Xav Ah, okay. I thought you've been following some really different concepts, because you understood the extension's purpose differently, so I was curious to see what else one might want to do with it.

No, it was just that when I originally proposed an extension, it was with the thought that you would select one path, enter a duration, and a block of CSS would be added. Multiple paths selected: multiple identical blocks of CSS added. If you wanted paths animated sequentially, you would set each one up individually, providing a delay for subsequent ones.

In that manner, there's no need for the user to name the animations. If they operated the extension on the same path more than once, the new setting would replace the old ones (hence my suggestion to use multiple style blocks, as it makes this a lot easier).

The difference is one of workflow. In my approach:

* Multiple lines selected - they're animated with the same settings.
* Multiple visits to the dialog to set sequential animations.

In your approach:

* Multiple lines selected to set sequential animations
* Multiple visits to the dialog to animate multiple paths with the same settings.


So it's not so much that I understood the extension's purpose differently, but rather the manner in which a user might work with it. Having text "write itself" is cool, and an easy one for users to understand. But I've most usefully seen this animation method used with complex drawings with lots of paths that all animation at once to quickly create the image. Something like your Inkscape logo or TD's celtic cross. So I was coming at it from the perspective of animating multiple lines simultaneously (per the OP's request), rather than making it easier to sequentially animate multiple lines.

[Moini]

@Xav can you link to an example for that 'most usefully' used method? It's not impossible that the extension could do both - sequential AND parallel animation, as the user chooses.

[tylerdurden]

I'm thinkin sequential is more common: whiteboard animation is quite popular, and it seems the OP was looking for something VideoScribe might not do (i.e.- something not common).

As an end-user, I would welcome the option to switch between approaches... it's just more programming, and that happens by magic, right?

[Xav]

@Xav can you link to an example for that 'most usefully' used method? It's not impossible that the extension could do both - sequential AND parallel animation, as the user chooses.

This page (linked from the CSS Tricks article) is the sort of thing I was thinking of:

https://tympanus.net/Development/SVGDra ... index.html

But I've seen other sites do the same thing (I didn't keep track of the URLs at the time, so can't provide references). There was one that was used for a couple's wedding site, where an outline of the happy couple was drawn over the space of a few seconds. And another where an isometric view of a computer was drawn (I don't think it was the page I linked above, as I seem to remember it was a PC and monitor, not a Mac, and that it remained with the outline image at the end).

Of course "most useful" is entirely subjective, and I'm coming at this from a web developer perspective. I don't see much benefit in being able to "write" text beyond a few short words - anything much longer probably benefits from a normal font anyway, at least in terms of readability. So to my mind the "most useful" examples are those that use it as a fancier alternative to just fading an image in.

I could easily see web developers wanting to "draw" their company logo, or an image of their product on their website, rather than just fading it in or having it immediately appear. If over-used it's also the sort of thing that could turn into the new <blink> or <marquee> tag (i.e. a fancy effect that quickly annoys the hell out of users) - but for the time being it's still niche enough to be cool


Outside of web sites I'm sure I've seen a similar technique used in TV: the architect's plans or blueprints that are "drawn" over the space of a few seconds on a home improvement show, or the line drawing of a scene that then fades into video footage. I'm not suggesting your extension would be used for those specific cases, just that there are probably other examples of "draw several lines simultaneously" that fall outside the normal scope of SVG or websites.

[Moini]

Thanks for the explanation, Xav. I see now where you're coming from This sounds like a useful addition to the extension. As I currently cannot work on this, but would very much like the extension to be able to do that, I've opened an issue on gitlab for it: https://gitlab.com/Moini/ink_line_animator/issues/6

[tylerdurden]

What we have so far is pretty great. Thanks for putting this together!

[Xav]

For a way more complex investigation of a similar effect to TDs previous post (warning, seriously technical stuff!):

https://css-tricks.com/animate-calligraphy-with-svg/

[Moini]

Cool techniques

I've tried both here (with clones, as it seems the animation is being lost when an object is moved into the defs section):
https://framadrive.org/s/MjF5rNLJ8xn94CK

[Lazur]

Started testing this extension.

Some experiences so far.
The timing function would be more convenient with the linear option set to default.

The other is just an idea. If there was an option to "clear" the path the same way as it was animated upon drawing.

The helping text is cropped off in the extension panel, cannot read the gitlab link nor can select the text yet alone click on the link.

The delay seconds settings would also need some explanation.
It sort of works but not as expected. The animation starts delayed but till then the path is rendered on screen in its fullness. Thus making an animation where each part starts animating one after another needs a different approach. Maybe would need an additional opacity value animation as well?

[Lazur]

Here is what I have so far:



Instead of using the darker blue, the background and this second animated colour should be the same as the other outlines in colour, making the knot appearing and disappearing.
As you can see, now this darker blue path is slightly wider than the white below to overlap with the outlines. Also, that if coloured the same lighter blue, it would overlap with the still present white parts.
Needs some even more complex structure I guess.

[v1nce]

the vivus javascript library can animate your svg paths

https://maxwellito.github.io/vivus/

[Lazur]

the vivus javascript library can animate your svg paths

https://maxwellito.github.io/vivus/

Thank you for the link!
Will get there this time eventually with the extension and a bit of editing in notepad++.

Another issue I found is an animated path duplicated leaves the duplicate unanimated. Ouch!


Edit: speaking adding more keyframes:

[Lazur]

Another test example, this time a bit larger -doesn't work with edge or explorer, chrome can deal with it to some extent.

svg here

It is adding some interlacing rendering effect to that previous halftone example.

[Moini]

Lazur, can you report bugs here, please:
https://gitlab.com/Moini/ink_line_animator/issues

(if applicable, with screenshots)

[Lazur]

Lazur, can you report bugs here, please:
https://gitlab.com/Moini/ink_line_animator/issues

(if applicable, with screenshots)

Reported some.
There are others I'm not sure of. Like how the delay time should work, what should be expected if more maths are selected at the same time (generated separate ones however it was the same for all the objects; could/should have been done in one go?); wether it is the default by browsers that before the animation starts the paths are rendered full -shouldn't that be noted in the tooltip- etc.

[Lazur]

Other testing with more complex paths.

drawing 1

drawing 2

First one is using a drawing to clip the animated paths while the other one is using the animated path for masking the drawing.
Both render the same result, showing the image being drawn.

The masing approach seems more universal, as it can be used with random underlying graphic content -like that halftone image above-.
Yet there seems to be a limit what chrome can handle and what not.
Here is a core path animated -photograph traced with centerline tracing- and
the masked result is here.

Wondering where is the limit of this extension and the resulting animation. Is there a node number which would prevent the extension working (guessing it has to measure the overall path length first to calculate the right amount of dash) or a path complexity where the browser simply stops even trying.

[Moini]

Lazur, thank you.

I know about the issue with paths shortly flashing before the animation starts: https://gitlab.com/Moini/ink_line_animator/issues/3

For the multi-path selection, the help tab says:
Subpaths will be drawn simultaneously. Separate paths will be drawn in stacking order.

[oblio]

Moini & Others on this thread-
Thanks you so much for the work you have done on this extension.
The comments and examples used in everyones' posts were very helpful to my understanding the topic and how to use the extension.
I installed(2 Jan) the extension and it worked right out of the box. (InkScp92.3 and Win7HomePremium)
As a 'casual' user of Inkscape I appreciate the functionality just the way you put it together - with the noted change request for the delay attribute to avoid displaying the path until after the delay.

Thanks again for this and the many contributions you all have made over the years.

NewYrFlrishAnm8Tst.svg

(21.02 KiB) Downloaded 44 times

[Moini]

Thank you! Happy New Year to you, too, oblio!