42 lines
842 B
JavaScript
42 lines
842 B
JavaScript
// Based on https://www.youtube.com/watch?v=bEyTZ5ZZxZs thanks @shiffman!
|
|
|
|
const canvasWidth = 400;
|
|
const canvasHeight = 400;
|
|
|
|
const canvas = SVG().addTo('body').viewbox(`0 0 ${canvasWidth} ${canvasHeight}`);
|
|
|
|
const space = 15;
|
|
let x = 0;
|
|
let y = 0;
|
|
|
|
const lineStyle = {
|
|
width: 2,
|
|
color: '#FFE3EC' };
|
|
|
|
|
|
(function drawLoop() {
|
|
// play with this value to get more forward or back slashes!
|
|
if (random(0, 1) < 0.25) {
|
|
// backslash
|
|
canvas.line(x, y, x + space, y + space).stroke(lineStyle);
|
|
} else {
|
|
// forward slash
|
|
canvas.line(x, y + space, x + space, y).stroke(lineStyle);
|
|
}
|
|
|
|
x += space;
|
|
|
|
if (x > canvasWidth) {
|
|
x = 0;
|
|
y += space;
|
|
}
|
|
|
|
if (y < canvasHeight) {
|
|
requestAnimationFrame(drawLoop);
|
|
}
|
|
})();
|
|
|
|
// random utility fn
|
|
function random(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
} |