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 ⚡️
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.