# Index of p5.plotSvg Examples

These examples show how to generate plotter-friendly SVGs from p5.js using p5.plotSvg. All examples are mirrored in collections at [editor.p5js.org](https://editor.p5js.org/golan/collections/MCA5RvDFX) and [openProcessing.org](https://openprocessing.org/curation/88363).


---

### ⭐ [plotSvg_smorgasbord](plotSvg_smorgasbord/README.md) ⭐ 

**Full demonstration of all p5.js drawing primitives exported to SVG.**<br />[here](plotSvg_smorgasbord/README.md) • [@editor](https://editor.p5js.org/golan/sketches/QReF_9ss2) • [@openProcessing](https://openprocessing.org/sketch/2455426)

[![plotSvg_smorgasbord](plotSvg_smorgasbord/plotSvg_smorgasbord_sm.png)](plotSvg_smorgasbord/README.md)


---

### [plotSvg_hello_static](plotSvg_hello_static/README.md)

Simplest possible demo, in "static" mode; all art is in `setup()` only.<br />[here](plotSvg_hello_static/README.md) • [@editor](https://editor.p5js.org/golan/sketches/AW8GI36fA) • [@openProcessing](https://openprocessing.org/sketch/2455362)

[![plotSvg_hello_static](plotSvg_hello_static/plotSvg_hello_static_sm.png)](plotSvg_hello_static/README.md)


---

### [plotSvg_hello_animating](plotSvg_hello_animating/README.md)

Simple demo; uses `setup()`, `draw()` and a keypress to capture an SVG during animation.<br />[here](plotSvg_hello_animating/README.md) • [@editor](https://editor.p5js.org/golan/sketches/JA-ty5j83) • [@openProcessing](https://openprocessing.org/sketch/2455390)

[![plotSvg_hello_animating](plotSvg_hello_animating/plotSvg_hello_animating_sm.png)](plotSvg_hello_animating/README.md)


---

### [plotSvg_addon_example](plotSvg_addon_example/README.md)

Demonstrates the use of the plotSvg add-on-style API — in both v1 and v2 versions of p5.js, and in both global and instance modes. 

- p5.js v1, global mode: [plotSvg_addon_example_v1_global](plotSvg_addon_example/plotSvg_addon_example_v1_global/index.html)
- p5.js v1, instance mode: [plotSvg_addon_example_v1_instance](plotSvg_addon_example/plotSvg_addon_example_v1_instance/index.html)
- p5.js v2, global mode: [plotSvg_addon_example_v2_global](plotSvg_addon_example/plotSvg_addon_example_v2_global/index.html)
- p5.js v2, instance mode: [plotSvg_addon_example_v2_instance](plotSvg_addon_example/plotSvg_addon_example_v2_instance/index.html)

[![plotSvg_addon_example_sm.png](plotSvg_addon_example/plotSvg_addon_example_sm.png)](plotSvg_addon_example/README.md)

---

### [plotSvg_generative](plotSvg_generative/README.md)

Simple "generative artwork"; press a button to export.<br />[here](plotSvg_generative/README.md) • [@editor](https://editor.p5js.org/golan/sketches/LRTXmDg2q) • [@openProcessing](https://openprocessing.org/sketch/2455399)

[![plotSvg_generative](plotSvg_generative/plotSvg_generative_sm.png)](plotSvg_generative/README.md)

---

### [plotSvg_drawing_recorder](plotSvg_drawing_recorder/README.md)

Records a series of marks drawn by the user.<br />[here](plotSvg_drawing_recorder/README.md) • [@editor](https://editor.p5js.org/golan/sketches/bQDM5IQdv) • [@openProcessing](https://openprocessing.org/sketch/2478914)

[![plotSvg_drawing_recorder](plotSvg_drawing_recorder/plotSvg_drawing_recorder_sm.png)](plotSvg_drawing_recorder/README.md)

---

### [plotSvg_particle_paths](plotSvg_particle_paths/README.md)

Accumulates the traces of some particles over time.<br />[here](plotSvg_particle_paths/README.md) • [@editor](https://editor.p5js.org/golan/sketches/1Toe-pMZH) • [@openProcessing](https://openprocessing.org/sketch/2478945)

[![plotSvg_particle_paths](plotSvg_particle_paths/plotSvg_particle_paths_sm.png)](plotSvg_particle_paths/README.md)

---

### [plotSvg_hatched_shapes](plotSvg_hatched_shapes/README.md)

A trick for exporting hatched ("filled") SVG shapes.<br />[here](plotSvg_hatched_shapes/README.md) • [@editor](https://editor.p5js.org/golan/sketches/b75oVci5f) • [@openProcessing](https://openprocessing.org/sketch/2479519)

[![plotSvg_hatched_shapes](plotSvg_hatched_shapes/plotSvg_hatched_shapes_sm.png)](plotSvg_hatched_shapes/README.md)

---

### [plotSvg_instancemode](plotSvg_instancemode/README.md)

Using p5.plotSvg in p5's [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).<br />[here](plotSvg_instancemode/README.md) • [@editor](https://editor.p5js.org/golan/sketches/Ib_myDs3s)

[![plotSvg_instancemode](plotSvg_instancemode/plotSvg_instancemode_sm.png)](plotSvg_instancemode/README.md)

---

### [plotSvg_post_grouping](plotSvg_post_grouping/README.md)

Merge groups of paths computed at different times. Demonstrates per-color "layers".<br />[here](plotSvg_post_grouping/README.md) • [@editor](https://editor.p5js.org/golan/sketches/aWfRPvVfT) • [@openProcessing](https://openprocessing.org/sketch/2684018)

![post_grouping.png](plotSvg_post_grouping/post_grouping_sm.png)

---

### [plotSvg_inline_hershey_text](plotSvg_inline_hershey_text/)

Intended for simple typography needs, this demonstration program uses an inlined sens-serif Hershey font. No external files are loaded.<br />
[here](plotSvg_inline_hershey_text/sketch.js) • [@editor](https://editor.p5js.org/golan/sketches/vjQxbigFg) 

![inline_hershey_text_sm.png](plotSvg_inline_hershey_text/inline_hershey_text_sm.png)


---

### [plotSvg_svg_font_text](plotSvg_svg_font_text/README.md)

Load and incorporate monoline SVG fonts into your exported designs. (For a large archive of monoline typefaces, see [this repository](https://github.com/golanlevin/p5-single-line-font-resources/).)<br />
[here](plotSvg_svg_font_text/README.md) • [@editor](https://editor.p5js.org/golan/sketches/rIsRh01Vj) • [@openProcessing](https://openprocessing.org/sketch/2684135)

![svg_font_text_sm.png](plotSvg_svg_font_text/svg_font_text_sm.png)

---

### [plotSvg_face_flipbook](https://openprocessing.org/sketch/2488219)

Exports a tiny flipbook recording from a face-tracker.<br />[here](plotSvg_face_flipbook/sketch.js) • [@openProcessing](https://openprocessing.org/sketch/2488219)

![plotSvg_face_flipbook](plotSvg_face_flipbook/plotSvg_face_flipbook.gif)