30:[] 2e:{"title":"Hello svg5","cells":[{"id":10,"value":"md`# Hello svg5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`[svg5](https://github.com/MAKIO135/svg5.js) is a tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on [Processing](https://processing.org/)/[p5js](https://p5js.org/) syntax and goal.\n\n[

](https://github.com/MAKIO135/svg5.js) https://github.com/MAKIO135/svg5.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`When used on a webpage, svg5 populates the global scope with methods to create SVG easily:\n~~~html\n\n\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`More examples here:\n- https://editor.p5js.org/makio135/sketches/wquU-A1DQ\n- https://editor.p5js.org/makio135/sketches/vwqbI49mr\n- https://editor.p5js.org/makio135/sketches/J13KRFIJM\n- https://editor.p5js.org/makio135/sketches/OazqbYiMn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`___\n[

](https://www.npmjs.com/package/svg5) \nsvg5 is also [available as a package on NPM](https://www.npmjs.com/package/svg5), we can import it here on Observable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"svg5 = require('https://bundle.run/svg5@0.1.3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n // Create an SVG element\n svg5.createSVG(width, 400)\n\n // Add content / elements\n svg5.background(0)\n svg5.fill(255)\n svg5.square(svg5.width / 2 - 100, svg5.height / 2 - 100, 200)\n \n // Finally, render the svg\n return html`${svg5.getHTML()}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n // Create an SVG element\n svg5.createSVG(width, 400)\n\n // Add content / elements\n svg5.background('black')\n svg5.stroke(255)\n svg5.noFill()\n for(let y = -150; y <= svg5.height + 150; y += 5){\n svg5.beginShape()\n svg5.vertex(-10, svg5.height + 100)\n for(let x = -10; x <= svg5.width + 10; x += 10){\n svg5.vertex(x, y + svg5.noise(x/500, y/200) * 50)\n }\n svg5.vertex(width + 10, svg5.height + 100)\n svg5.endShape(svg5.CLOSE)\n }\n\n // Finally, render the svg\n return html`${svg5.getHTML()}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`The svg5 package can also be used to create SVGs server side: see for example https://glitch.com/edit/#!/svg5, a NodeJS app made with expressJS to deliver [an API that returns generative SVGs](https://svg5.glitch.me/svg).`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}