I’ve recently used both Raphael and jQuery SVG – and here are my thoughts: Raphael Pros: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation. Cons: is a layer over the actual SVG markup, makes … Read more
Making something audio reactive is pretty simple. Here’s an open source site with lots audio reactive examples. As for how to do it you basically use the Web Audio API to stream the music and use its AnalyserNode to get audio data out. “use strict”; const ctx = document.querySelector(“canvas”).getContext(“2d”); ctx.fillText(“click to start”, 100, 75); ctx.canvas.addEventListener(‘click’, … Read more
Gimme the Code! // move element “on top of” all others within the same grouping el.parentNode.appendChild(el); // move element “underneath” all others within the same grouping el.parentNode.insertBefore(el,el.parentNode.firstChild); // move element “on top of” all others in the entire document el.ownerSVGElement.appendChild(el); // move element “underneath” all others in the entire document el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); Within Raphael specifically, it’s … Read more
Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG? Definitely. If it is possible, what’s the technique? This annotated code snippet works: <!DOCTYPE html> <html> <head> <title>SVG Illustrator Test</title> </head> <body> <object data=”alpha.svg” type=”image/svg+xml” id=”alphasvg” width=”100%” height=”100%”></object> <script> var a = document.getElementById(“alphasvg”); // It’s important to … Read more