# svg5

> svg5 is a tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on Processing/p5js syntax.

Latest version **0.2.2** (published 2022-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg5
pnpm add svg5
yarn add svg5
bun add svg5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2022-12-13 |
| First published | 2020-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 58.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 148 |
| Author | makio135 |
| Maintainers | makio135 |
| Keywords | SVG |

## Links

- npm: https://www.npmjs.com/package/svg5
- Repository: https://github.com/MAKIO135/svg5.js
- Homepage: https://github.com/MAKIO135/svg5.js#readme
- Issues: https://github.com/MAKIO135/svg5.js/issues
- npm.io page: https://npm.io/package/svg5

## Recent versions

- 0.2.2 (latest) — 2022-12-13
- 0.1.6 — 2022-06-24
- 0.1.5 — 2022-06-22
- 0.1.4 — 2021-01-03
- 0.1.3 — 2020-11-19
- 0.1.2 — 2020-10-30
- 0.1.1 — 2020-10-30
- 0.1.0 — 2020-10-30
- 0.0.11 — 2020-10-29
- 0.0.10 — 2020-10-28
- 0.0.9 — 2020-10-26
- 0.0.8 — 2020-10-26
- 0.0.7 — 2020-10-26
- 0.0.6 — 2020-10-26
- 0.0.5 — 2020-10-25
- … 4 more at https://npm.io/package/svg5/versions

## README

# svg5.js
svg5 is a tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on Processing/p5js syntax.

<img src="https://svg5.glitch.me/svg" width="100%">

## Example
```html
<script src="https://unpkg.com/svg5/svg5.min.js"></script>
<script>
    // Create an SVG element
    createSVG(500, 500)

    // Add content / elements
    background('red')
    stroke(0)
    noFill()
    for(let y = -150; y <= height + 150; y += 5){
        beginShape()
        vertex(-10, height + 100)
        for(let x = -10; x <= width + 10; x += 10){
            vertex(x, y + noise(x/500, y/200) * 50)
        }
        vertex(width + 10, height + 100)
        endShape(CLOSE)
    }

    // Finally, render the svg
    render() 
</script>
```

More examples here:
- https://editor.p5js.org/makio135/sketches/wquU-A1DQ
- https://editor.p5js.org/makio135/sketches/vwqbI49mr
- https://editor.p5js.org/makio135/sketches/J13KRFIJM
- https://editor.p5js.org/makio135/sketches/OazqbYiMn

Bonus: hatched shapes using the Polygon class from https://observablehq.com/@makio135/utilities  
https://editor.p5js.org/makio135/sketches/VHsFuHzRb

## Documentation
Start by creating an SVG element using the `createSVG` function:
- `createSVG(width, height)`
Then, simply draw your elements like a Processing sketch!

### Global variables
- `width`: width of the SVG.
- `height`: height of the SVG.
- `CLOSE`: used to specify if a path should be closed.

### Shapes
- `circle(centerX, centerY, radius)`
- `ellipse(centerX, centerY, width, height)`
- `rect(x, y, width, height)`
- `square(x, y, width)`
- `line(x1, y1, x2, y2)`
- `polyline(x1, y1, x2, y2, x3, y3 [, …, xn, yn])`
- `triangle(x1, y1, x2, y2, x3, y3)`
- `quad(x1, y1, x2, y2, x3, y3, x4, y4)`
- `polygon(x1, y1, x2, y2, x3, y3 [, …, xn, yn])`
- `regularPolygon(centerX, centerY, radius [, startAngle])`: optional `startAngle` is in degrees
- `arc(centerX, centerY, width, height, startAngle, endAngle)`: angles are in degrees
- `spline(x1, y1, x2, y2, x3, y3 [, …, xn, yn [, smoothness [, isClosed]]])`: optional `smoothness` from 0 to 1 (default: `1`) and optional boolean `isClosed` (default: `false`)

### Styling
- `background(color)`
- `clear()`
- `opacity(amount)` where amount goes from 0 to 1.
- `fill(color)`, 
- `noFill()`
- `stroke(color)`
- `strokeWidth(n)` specifies the width in pixels of the stroke
- `strokeWeight(n)` alias for `strokeWidth` to keep p5js naming.
- `strokeCap(style)` style can be either `butt`, `square` or `round`
- `strokeJoin(style)` style can be either `miter`, `round` or `bevel`
- `strokeDashArray(n1, n2 [, …, n])`
- `noStroke()`

The `color` parameter for `background`, `fill` and `stroke` functions can be passed either as:
- gray level between 0 (black) and 255 (white): `fill(255)` (white)
- gray and alpha levels between 0 and 255: `fill(255, 100)` (white with alpha)
- red, green and blue levels between 0 and 255: `fill(255, 0, 0)` (red)
- red, green, blue and alpha levels between 0 and 255: `fill(255, 0, 0, 100)` (red with alpha)
- a CSS color string, ie: `fill("red")`, `fill("#ff0000")`, `fill("rgb(255, 0, 0)")`, `fill("rgba(0, 0, 0, 0.5)")`, `fill("hsl(30, 100%, 50%)")`, …

### Vertex shapes
- `beginShape()` [See doc on p5js](https://p5js.org/reference/#/p5/beginShape)
- `vertex(x, y)` [See doc on p5js](https://p5js.org/reference/#/p5/vertex)
- `bezierVertex(x1, y1, x2, y2, x, y)` [See doc on p5js](https://p5js.org/reference/#/p5/bezierVertex)
- `cubicVertex(x2, y2, x, y)` [See doc on p5js](https://p5js.org/reference/#/p5/cubicVertex)
- `quadraticVertex(x1, y1, x, y)` [See doc on p5js](https://p5js.org/reference/#/p5/quadraticVertex)
- `lineTo(x, y)`
- `moveTo(x, y)`
- `endShape([CLOSE])` [See doc on p5js](https://p5js.org/reference/#/p5/endShape)

### Groups
- `beginGroup()` starts an SVG group `<g>`. Transformations are added to the group (-> cleaner SVG).
- `endGroup()` closes an SVG group `</g>`

### Math helpers
- `lerp(a, b, t)` calculates value between `a` and `b` at a specific increment between 0 and 1.
- `map(n, start1, end1, start2, end2)` re-maps a number from one range to another.
- `constrain(value, min, max)` constrains a value between a minimum and maximum value.
- `radians(degrees)` converts a value in degrees to radians.
- `degrees(radians)` converts a value in radians to degrees.
- `random()` random(max), random(min, max) or random(array).
- `randomSeed(seed)` sets the seed value for random().
- `noise1D(x)` computes a value using simplex noise 1D.
- `noise2D(x, y)` computes a value using simplex noise 2D.
- `noise3D(x, y, z)` computes a value using simplex noise 3D.
- `noise4D(x, y, z, w)` computes a value using simplex noise 4D.
- `noise(x [, y , z , w])` computes a value using simplex noise 1D to 4D, depending on number of arguments.
- `noiseSeed(seed)` sets the seed value for noise.

### Matrix transformations
- `translate(x, y)`
- `rotate(degrees)`
- `scale()` scale(n) for uniform scale or scale(x, y).
- `push()` start a new drawing state.
- `pop()` restore previous state.

### Render SVG
- `render([parentCSSSelector])`
You can specify a CSS selector as third parameter to let the library know where to append the SVG. By default, SVG is appended to the `body` of the page.  
**You can simply right click the SVG to download it 🙂**

### Save SVG file
- `save()`

### SVG helpers
- `precision(n)` sets the number of digits wanted after floating point
- `getHTML()` returns the SVG as an HTML String

### Custom methods for modularity
- `addStyle` creates a `<style>` element and adds content to it
- `addDef` creates a `<defs>` element and adds content to it
- `setAttribute`
- `removeAttribute`
- `clearAttributes`

## NPM
svg5 is also available on NPM: `npm i svg5`

```js
const svg5 = require('svg5')
svg5.createSVG(500, 500)
svg5.background(0)
svg5.fill(255)
svg5.noStroke()
svg5.circle(svg5.width/2, svg5.height/2, 200)
```

Examples: 
- https://observablehq.com/@makio135/hello-svg5
- https://glitch.com/edit/#!/svg5?path=server.js

## Dependencies
No dependencies but svg5 is using code from [simplex-noise.js](https://github.com/jwagner/simplex-noise.js) from [
Jonas Wagner](https://github.com/jwagner) and [Alea](https://github.com/coverslide/node-alea) from Johannes Baagøe, packaged by [Richard Hoffman](https://github.com/coverslide)

## License
Copyright (c) 2020 Lionel RADISSON, licensed under the MIT License (enclosed)

---
_Source: https://npm.io/package/svg5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._