We don't know exactly what size the sites will want, so SVG has been a good choice.
We have up to a hundred to generate, so that's an argument for doing things programmatically, rather than in Sketch or Illustrator. Plus I'm a little lazy about learning to new things and neither program jelled immediately for me in the past.
Today I Learned: p5.js has a completely fine SVG implementation! You'll want to grab a matching set of p5.js and p5.svg.js from the releases page, then something like this will work:
<!doctype html>
<html>
<head>
<title>fun with p5js to svg</title>
<script src="p5.js"></script>
<script src="p5.svg.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(600, 200, SVG); // Create SVG Canvas
strokeWeight(2);
stroke('#ED225D');
}
function draw() {
var x = frameCount / 100;
var y = sin(x * PI * 2);
line(x * width, height * 0.5,
x * width, y * height / 2 + height * 0.5);
if(round(frameCount) % 10 === 0){
var name = "wave"+frameCount;
save(name);
}
if (frameCount > 100) {
noLoop();
}
}
</script>
</body>
</html>
You can see it in action here BUT - it will try to autodownload 10 SVG files to your system.
Anyway, I looked harder for the p5.js solution when I realized the SVG.js I looked at previously seemed to have weaksauce support for arcs, which were kind of important to what I was aiming for.
FOLLOWUP NOTES:
Use clear(); instead of background(); if you want to preserve the background transparency on multiple colors. (Kind of runs up how Processing is a generally more about "destroy things every frame and redraw" than traditional SVG... this might be an issue with animations etc)
If you want to display an external SVG (especially if you're going to save this as an SVG) you have to use loadSVG() (in the preload() of course) rather than loadImage(); - otherwise you get a horrible png conversion.
PREVIOUSLY:
Before I found p5.js could do the task, I wrote this...
5 years ago (yeesh) I wrote about using Raphael.js to do some fun SVG animations, but right now I think SVG.js seems like a better bet.
Combining its basic example code with this advice about saving SVGs I came up with the following:
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
<script src="svg.js"></script>
</head>
<body>
<div id="drawing"></div>
<script>
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')
var a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
var blob = new Blob([draw.svg()], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>fun with p5js to svg</title>
<script src="p5.js"></script>
<script src="p5.svg.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(600, 200, SVG); // Create SVG Canvas
strokeWeight(2);
stroke('#ED225D');
}
function draw() {
var x = frameCount / 100;
var y = sin(x * PI * 2);
line(x * width, height * 0.5,
x * width, y * height / 2 + height * 0.5);
if(round(frameCount) % 10 === 0){
var name = "wave"+frameCount;
save(name);
}
if (frameCount > 100) {
noLoop();
}
}
</script>
</body>
</html>
You can see it in action here BUT - it will try to autodownload 10 SVG files to your system.
Anyway, I looked harder for the p5.js solution when I realized the SVG.js I looked at previously seemed to have weaksauce support for arcs, which were kind of important to what I was aiming for.
FOLLOWUP NOTES:
Use clear(); instead of background(); if you want to preserve the background transparency on multiple colors. (Kind of runs up how Processing is a generally more about "destroy things every frame and redraw" than traditional SVG... this might be an issue with animations etc)
If you want to display an external SVG (especially if you're going to save this as an SVG) you have to use loadSVG() (in the preload() of course) rather than loadImage(); - otherwise you get a horrible png conversion.
PREVIOUSLY:
Before I found p5.js could do the task, I wrote this...
5 years ago (yeesh) I wrote about using Raphael.js to do some fun SVG animations, but right now I think SVG.js seems like a better bet.
Combining its basic example code with this advice about saving SVGs I came up with the following:
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
<script src="svg.js"></script>
</head>
<body>
<div id="drawing"></div>
<script>
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')
var a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
var blob = new Blob([draw.svg()], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();
</script>
</body>
</html>
I think that should scale and fit in a simple loop without too much hassle.
