anime.js - Line Drawing

[Acorn]

As this requires Shapes as SVG, only XPro+ is currently available for building the Animation.

anime.js -Line Drawing.xar

Again, this is just a taster but clearly several of you are on top of tweaking and improving my offerings.

Here is a demo: https://shared.xara.com/NS0CTtqJ2B

Have fun!

Acorn

[FLySOLO]

Hey Acorn,

that's just great. I love it. I'll put it in one of my next web projects.

Can i change the order lines are drawn?

http://flysolo.de/xara_ani_js/line_drawing/

bb,

fly

As this requires Shapes as SVG, only XPro+ is currently available for building the Animation.

anime.js -Line Drawing.xar

Again, this is just a taster but clearly several of you are on top of tweaking and improving my offerings.

Here is a demo: https://shared.xara.com/NS0CTtqJ2B

Have fun!

Acorn

[Acorn]

Hey Acorn,
that's just great. I love it. I'll put it in one of my next web projects.
Can i change the order lines are drawn?
http://flysolo.de/xara_ani_js/line_drawing/
bb, fly

FLy, nice graphic.

There are several ways:

• In the Animation script, change direction: 'alternate', to direction: 'reverse',
• For each shape, change its stacking order in the Page & Layer gallery (Shift+Ctrl+F & Shift+Ctrl+B)
• For each shape, use the Shape Tool and click the Reverse Path icon
• Split shapes at different nodes, delete, move, add and recombine
• Use Inkscape to create your SVG as you can manipulate the SVG DOM easily
• Use Boxy SVG (I have a paid licence but it I think it is has a free mode - click Elements at the bottom to see the SVG DOM)

Acorn

[yellowbird]

Fantastic!

[FLySOLO]

Thank you,

FLy

FLy, nice graphic.

There are several ways:

• In the Animation script, change direction: 'alternate', to direction: 'reverse',
• For each shape, change its stacking order in the Page & Layer gallery (Shift+Ctrl+F & Shift+Ctrl+B)
• For each shape, use the Shape Tool and click the Reverse Path icon
• Split shapes at different nodes, delete, move, add and recombine
• Use Inkscape to create your SVG as you can manipulate the SVG DOM easily
• Use Boxy SVG (I have a paid licence but it I think it is has a free mode - click Elements at the bottom to see the SVG DOM)

Acorn

[Egg Bramhill]

It's also a great way to show directions/maps/paths etc.

DEMO

[Boy]

That's a nice application, Egg! How difficult was it to code this animation?