Matter and Void | Projects

Various things I've built

SVG Blending

2015-07-21T00:00:00Zproject

Playing around with blending two SVG images through a canvas element. One design constraint was to have the SVG be inline in order to do dynamic color changing before applying the blending (and to support resizing). This makes use of the SVGInjector library.

The code is:

1function importSVG(sourceSVG, targetCanvas) {
2  var svgXml = (new XMLSerializer()).serializeToString(sourceSVG)
3  var ctx = targetCanvas.getContext('2d')
4  ctx.globalCompositeOperation = 'multiply'
5  var img = new Image()
6  img.height = '400'
7  img.width = '400'
8  img.onload = function() {
9    ctx.drawImage(img, 0, 0, 400, 400)
10  }
11  img.src = "data:image/svg+xml;base64," + btoa(svgXml)
12}
13

14var options = {
15  evalScripts:'never',
16  each: function(svg) {
17    svg.style.height = '400px'
18    svg.style.width = '400px'
19    importSVG(svg, document.querySelector('canvas'))
20  }
21}
22

23SVGInjector(document.querySelectorAll('.replace'), options)
Dan Vingo
This is the personal site of Daniel Vingo