How to create a dynamic SVG process ? 👀


A colored journey through pixels, video, canvas and SVG export. I hope my "pens" will be inspiring. Do not hesitate to share or fork them.

Step 1 | Get pixel array from an image with getImageData().

You need to hover below example to show sliders.


To allow getimagedata() works with image in canvas, we need to use Base64 encoding or host image on Codepen "Assets" or also config web server to "Allow Cross Origin".

Step 2 | Add a HTML5 video tag in DOM, then copy it in Canvas

Step 3 | Get pixel array from Canvas, update and draw SVG shapes

It’s always nice to display some RVB value.

Step 4 / Add sliders to control video colors and SVG Export

SVG export based on canvas2svg.js

Alternative Step | Create a dynamic and parametric poster generator in canvas + SVG export ⚡️

TIPS : You can change "image URL" simply by copy/paste a Unsplash image in the dedicated input. SVG export based on canvas2svg.js


To be continued… I am working on new ideas to develop this creative process! Thanks to Chevalvert Studio's team for inspiring me during these trials.