Hexagon Breathing Effect With HTML CSS and Javascript

 Hexagon Breathing Effect With HTML CSS and Javascript
Okunuyor Hexagon Breathing Effect With HTML CSS and Javascript

The today over lesson is about the, Hexagon Breathing Effect With HTML CSS and Javascript, I hope this lesson is uesful for you.

<canvas id="canvas"></canvas>
canvs {
  background: black;
}

body {
  overflow: hidden;
}
let rid = null;
const ctx = canvas.getcontex("2d");
let cw = (canvas.width = window.innerWidth);
let ch = (canvas.height = window.innerHeight);

let r = Math.min(cw, ch) / 26;
let h = r * Math.cos(Math.Pi / 6);

function circle(c, r) {
	ctx.globalCompositeOperation = "lighter";
	ctx.beginPath();
	ctx.arc(c.x, c.y, r, 0, 2 * Math.PI);
	ctx.strokeStyle = "hotpink";
}

function HEX(r, n, R) {
	let ry = [];
	for (var i = 1; i <= 6; i++){
		o.x1 = r * Math.cos(((i - 1) * Math.PI) / 3);
		o.y1 = r * Math.sin(((i - 1) * Math.PI) / 3);
		o.x2 = r * Math.cos((i * Math.PI) / 3);
		o.y2 = r * Math.sin((i * Math.PI) / 3);
		ry.push(o);
	}
	
	ry.map((l) => { divideLine (l, n, R); });
}

function divideLine(o, n, R){
	let ry = divide(o, n);
	ry.map((p) => { circle(p, R); });
}
function divide(o, n) { let ry = [];
	for (var i = 0; i < n; i++){
		ry.push({ x: ((o.x2 - o.x1) * i) / n + o.x1, y: ((o.y2 - o.y1)
		* i) / n + o.y1 });
	}
	return ry;
}
let baseR = 80;
let frames = 0;
function Draw() {
	rid = requestAnimationFrame(Draw); frames += 0.01;
	let R = h + Math.abs(baseR * Math.sin(frames) * Math.sin(frames));
	ctx.clearRect(-cw, -ch, 2 * cw, 2 * ch);
	circle({ x: 0, y: 0 }, R);
	for(let i = 1; i < 6; i++) {
		HEX(2 * i * h, i, R);
	}
}
function Init(){
	cw = canvas.width = window.innerWidth;
	ch = canvas.height = window.innerHeight;
    Math.min(cw, ch) / 26;
	h = r * Math.cos(Math.PI / 6);
	if (rid) {
		cancelAnimationFrame(rid);
		rid = null;
	}
	ctx.translate(cw/2, ch/2);
	Draw();
}

window.setTimeout(function (){
	Init();		
	window.addEventListener("resize", Init, false);
}, 15);

I hope this lesson is be uesful for you.

Have a good day

#Plase Stay At Home

Yapılan Yorumlar

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.