Let lines simultaneously been drawn

Post questions on how to use or achieve an effect in Inkscape.
tylerdurden
Posts: 2337
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Let lines simultaneously been drawn

Postby tylerdurden » Sun Jun 24, 2018 12:39 pm

Will do!

SVG Image
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
Xav
Posts: 1204
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Let lines simultaneously been drawn

Postby Xav » Sun Jun 24, 2018 4:43 pm

Moini wrote:(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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Mon Jun 25, 2018 2:06 am

@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.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Mon Jun 25, 2018 2:47 am

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)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Mon Jun 25, 2018 3:02 am

(and meshes and hatch fills are no longer in the draft for SVG 2.0 - but they are *in* the draft for 2.1)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1204
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Let lines simultaneously been drawn

Postby Xav » Mon Jun 25, 2018 5:22 pm

Moini wrote:@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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Tue Jun 26, 2018 12:00 am

@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.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

tylerdurden
Posts: 2337
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Let lines simultaneously been drawn

Postby tylerdurden » Tue Jun 26, 2018 12:12 am

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? :?
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
Xav
Posts: 1204
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Let lines simultaneously been drawn

Postby Xav » Tue Jun 26, 2018 1:28 am

Moini wrote:@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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Thu Jun 28, 2018 8:11 am

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
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

tylerdurden
Posts: 2337
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Let lines simultaneously been drawn

Postby tylerdurden » Fri Jun 29, 2018 12:55 am

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

SVG Image
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
Xav
Posts: 1204
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Let lines simultaneously been drawn

Postby Xav » Fri Jun 29, 2018 1:12 am

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/
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Fri Jun 29, 2018 10:57 am

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
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Sun Dec 23, 2018 12:02 am

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
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Sun Dec 23, 2018 5:05 am

Here is what I have so far:

SVG Image

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
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Let lines simultaneously been drawn

Postby v1nce » Sun Dec 23, 2018 5:42 am

the vivus javascript library can animate your svg paths

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

Lazur
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Sun Dec 23, 2018 7:17 am

v1nce wrote: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:

SVG Image

Lazur
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Sun Dec 23, 2018 11:53 am

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
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Sun Dec 23, 2018 12:20 pm

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

(if applicable, with screenshots)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Sun Dec 23, 2018 12:52 pm

Moini wrote: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
Posts: 4713
Joined: Tue Jun 14, 2016 10:38 am

Re: Let lines simultaneously been drawn

Postby Lazur » Tue Dec 25, 2018 11:19 am

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
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Tue Dec 25, 2018 1:33 pm

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.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

oblio
Posts: 1
Joined: Sat Jan 05, 2019 2:05 am

Re: Let lines simultaneously been drawn

Postby oblio » Sat Jan 05, 2019 2:45 am

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 51 times

Moini
Posts: 3333
Joined: Mon Oct 05, 2015 10:44 am

Re: Let lines simultaneously been drawn

Postby Moini » Sat Jan 05, 2019 9:47 am

:D Thank you! Happy New Year to you, too, oblio!
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)


Return to “Help with using Inkscape”

Who is online

Users browsing this forum: No registered users and 6 guests