ygev / svg2p5

Convert SVG to p5.js canvas.

Home Page:https://svg2p5.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

svg2p5

Convert SVG markup to p5.js canvas

Try it out!

svg2p5 is a converter that takes in SVG markup in the form of a <svg> tag or a <path> tag and outputs equivalent p5.js canvas code.

Screenshot of svg2p5 website.

Support

✅ Supported SVG Markup ❌ Unsupported SVG Markup (yet)
<path> <circle>
stroke="" <rect>
fill="" <linearGradient>
strokeCap="" <text>
strokeJoin="" etc.

Known Issues

Generally, the output may be imperfect and require some manual cleaning.

  • Sometimes the last vertex connects to the first vertex.
  • Sometimes you will find lonely vertex()s and bezierVertex()s that you will need to wrap with beginShape() and endShape() in order to see.

Short-Term To-Do List

  • Error prevention through linting SVG markup for unsupported attributes, notifying user and disabling conversion if that is the case.
  • MacOS Classic style active states for windows.
  • Update canvg.js to current version instead of using the ancient one that came with Professor Cloud.

Long-Term Objective

Make svg2p5 support all SVG attributes that have p5.js equivalents. That includes shadows, text, gradients, native shapes, etc.

Credits

About

Convert SVG to p5.js canvas.

https://svg2p5.com


Languages

Language:JavaScript 86.1%Language:CSS 7.1%Language:HTML 6.8%