How to create SVG path for custom path animation

[john1jan]

Hi @lzanita09 ,

Your animations are awesome. Great library for cross page animations. I have to create a different path animation. with my own path. I checked your PaperPlaneView it has some SVG path. Can you guide where can I create this path and use it in my app.

Regards
John Francis

[lzanita09]

Thank you!

To create SVG paths, you can use design software like Sketch, just draw the path you want, and then export it as SVG file. Within the SVG file, you should be able to see the path within <path /> tags.

[CrandellWS]

there are many tools. I tend to use: inkscape https://github.com/inkscape/inkscape

In the past I actually used https://github.com/szimek/signature_pad

Sorry I lied it was https://willowsystems.github.io/jSignature/#/about/

Granted I just recently found this project, which has grabbed my interest but I have not used it yet

[john1jan]

Thanks @lzanita09 and @CrandellWS . I got he SVG path from Sketch software. Thanks for helping.

[john1jan]

@lzanita09 i used sketch to create svg paths. But. what ever path I create, it starts from the left of the screen in the app i.e. PaperPlaneView start the path from left corner by default. I want the path to start from the center of the screen and animate to next screen. is it possible ?

[john1jan]

this is my path

M1450,-818.675637 C1450,-853.607901 1467.79899,-952.36704 1516.01011,-1007.02012 C1551.1773,-1046.88634 1613.04289,-1051.84585 1644.10514,-1047.87475 C1680.28814,-1043.24899 1722.79975,-1032.33362 1749.55008,-996.421198 C1801.50708,-926.668739 1822.58203,-812 1822.58203,-812

[lzanita09]

When you draw the path in the View, you can do canvas.save(), do translation/rotation to adjust the canvas, draw path, and then canvas.restore().