How HTML5 Canvas and SVG Realize Colorful Kaleidoscope Animation

How HTML5 Canvas and SVG Realize Colorful Kaleidoscope Animation: BY Bobby30 Nov,2020; Tags:
HTML5 Canvas SVG

Introduction

The advantage of Canvas is that it allows you to draw any graphics on the drawing board. The advantage of SVG is that it can easily draw paths of various shapes on the web page. Today I will share with you a colorful kaleidoscope animation based on HTML5 Canvas and SVG. The colorful path will continuously change shape and color, and the effect is very cool.

How HTML5 Canvas and SVG Realize Colorful Kaleidoscope Animation

Instructions

HTML Body Code

<div class="container">
	<canvas class="canvas canvas--shape js-canvas" width="500" height="500"></canvas>
	<canvas class="canvas js-canvas-2" width="500" height="500"></canvas>
</div>

<svg id="paper"></svg>
<svg id="poper"></svg>

Css Code

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  position: absolute;
  z-index: 20;
  animation: turn 16s cubic-bezier(1, -3.099, 1, 2.99) infinite alternate;
  mix-blend-mode: difference;
}

.canvas--shape {
  z-index: 20;
  opacity: 0;
}

@keyframes turn {
  to {
    transform: rotate(380deg);
    filter: hue-rotate(1126.5262274987deg);
    z-index: -15;
  }
}
@keyframes torn {
  to {
    filter: hue-rotate(60deg);
    z-index: -5;
    background: rgba(43, 171, 107, 0.9);
  }
}
@keyframes tern {
  to {
    mix-blend-mode: color-burn;
    filter: hue-rotate(260deg);
    z-index: -1;
    background: rgba(255, 215, 0, 0.5);
  }
}

Js Code

const drawShape = (hue = '0', rotation = 0, percent = 1) => {
	const padding = 3;
	const lineWidth = wh - padding;
	const spacing = lineWidth / steps;

	const scale = 0.09 + (1 * (1 - percent));
	const alpha = 0.1 + (0.5 * (1 - percent));

	ctx.beginPath();
	ctx.strokeStyle = `hsla(${hue}, 100%, 20%, 0.2)`;
	ctx.fillStyle = `hsla(${hue}, 100%, 20%, 0.01)`;

	ctx.moveTo(0, padding);
	ctx.lineTo(wh * 0.43, hh * 0.7);
	ctx.lineTo(wh - padding/.52, hh);
 
	ctx.stroke();
	ctx.closePath();


	ctx.beginPath();
	ctx.fillStyle = `hsla(${hue}, 100%, 40%, 0.25)`;
	ctx.arc(lineWidth, wh, Math.pow(1.9,2.2), 0, Math.PI * 2, false);
	ctx.fill();
	ctx.closePath();

	for (let i = 0; i < steps; i++) {
		const lineColor = `hsla(${hue}, 100%, 25%, ${alpha})`;

		const from = { x: spacing * i, y: hh };
		const to = { x: Math.pow(10,1.2), y: padding*4+ (spacing * i*.1) };

		drawLine(lineColor, from, to);
	}
function random(min, max) {
    return Math.random() * (max - min) + min;
}
	ctx2.save();
	ctx2.translate(wh, hh);
	ctx2.rotate(rotation);
	ctx2.scale(scale, scale);
    ctx2.globalCompositeOperation = 'exclusion';

	const a = (Math.PI * 2) / 4;

	for (let i = 0; i < 4; i++) {
		ctx2.rotate(a);
		ctx2.drawImage(canvas, 0, 0, w, h, Math.pow(0.5,5.8), -hh, w, h);
	}

	ctx2.restore();
};

VIEW NOW