# SVG to vertex code for P5JS

**URL:** <https://discourse.processing.org/t/svg-to-vertex-code-for-p5js/14942>\
**Category:** p5.js\
**Created:** [October 25, 2019, 10:55am UTC](https://discourse.processing.org/t/svg-to-vertex-code-for-p5js/14942 "2019-10-25T10:55:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [October 25, 2019, 10:55am UTC](https://discourse.processing.org/t/svg-to-vertex-code-for-p5js/14942/1 "2019-10-25T10:55:10Z")

</div>

Hi

I’m trying to implement an SVG file into P5JS

Since, as I currently understand, that is not supported, I was wondering if there is a known tool to parse the SVG to P5JS shape code (ie beingShape, vertex etc…).

Adding a link of the Processing sketch I’m trying to recreate in P5JS:  
[Sketch Example](https://www.instagram.com/p/B3_yP8oA4le/?utm_source=ig_web_copy_link)

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [October 25, 2019, 12:33pm UTC](https://discourse.processing.org/t/svg-to-vertex-code-for-p5js/14942/2 "2019-10-25T12:33:58Z")

</div>

Hi  
For this type of animations, you should take a look to [anime.js](https://animejs.com/), ready-to-use to anime svg, and really simple to use. It could be more painful in p5.

But if you really want to do it with p5, i have an old processing sketch witch convert .svg files into arrays of points in a .txt file. You will be able to to use these points to redraw your shape in p5 : [https://github.com/R4ph3rd/generative/tree/master/svg\_to\_array](https://github.com/R4ph3rd/generative/tree/master/svg_to_array)