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

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.

Advertisement

How HTML5 Canvas and SVG Realize Colorful Kaleidoscope Animation
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();
};                        

Advertisement