p5.js-svg
Version:
The main goal of p5.SVG is to provide a SVG runtime for p5.js, so that we can draw using p5's powerful API in \<svg\>, save things to svg file and manipulating existing SVG file without rasterization.
29 lines (28 loc) • 1.14 kB
HTML
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/p5@1.4.1/lib/p5.js"></script>
<script src="../dist/p5.svg.js"></script>
<script src="https://unpkg.com/abcjs@6.0.0-beta.33/dist/abcjs-basic-min.js"></script>
<script src="lib/rainbow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/rainbow.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Examples for p5.SVG</h1>
<ul>
<li><a href="#basic">Basic 2D Shapes in SVG</a></li>
<li><a href="#filters">Basic P5 Filters in SVG</a></li>
<li><a href="#graphics">SVG Graphics</a></li>
<li><a href="#exporting">Exporting SVG</a></li>
<li><a href="#manipulating">Manipulating Existing SVG</a></li>
<li><a href="#abc">Loading SVG Generated by abcjs</a></li>
<li><a href="#dataurl">Convert to dataURL and draw dataURL</a></li>
<li><a href="#events">Events</a></li>
</ul>
<h2>The SVG Canvas</h2>
<div id="canvas"></div>
<h2>Source Code</h2>
<pre id="code"></pre>
<script src="lib/demo.js"></script>
</body>