Circle decay

Developer
Gabi
Size
2,638 Kb
Views
32,384
  1. Circle decay Previews
  2. Circle decay HTML Codes
  3. Circle decay CSS Codes
  4. Circle decay JS Codes

How do I make an circle decay?

Inspired by this tweet, to be more precise by Circle decay - an SVG demo . What is a circle decay? How do you make a circle decay? This script and codes were developed by Gabi on 22 August 2022, Monday.

Circle decay Previews
IQ Test

Circle decay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circle decay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c"> https://twitter.com/Real_CSS_Tricks/status/730774601035190272 http://nbremer.github.io/openvis2016/slides/#/colorAdd-code</canvas> <script src="js/index.js"></script>
</body>
</html>

Circle decay - Script Codes CSS Codes

body { background: black; overflow: hidden;
}

Circle decay - Script Codes JS Codes

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var cx = cw / 2, cy = ch / 2;
var rad = Math.PI / 180;
var requestId = null;
var frames = 360;
var R = cx / 2;
var colors = ["#FA2E59", "#FF703F", "#FF703F", "#F7BC05", "#ECF6BB", "#76BCAD"];
function Particle(x, y) { this.a = Math.random() * 2 * Math.PI; this.R = randomIntFromInterval(9, 15); this.r0 = this.R; this.speed = .25 + Math.random(); this.x = x; this.y = y; this.color = colors[~~(Math.random() * colors.length)];
}
Particle.prototype.draw = function() { if (this.r > 0) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.fill(); }
}
var pathRy = [];
var particles = [];
function buildTrajectory() { pathRy.length = 0; for (var a = 0; a <= 360; a += 1) { var o = {} var t = a * rad; o.x = cx + (R * Math.cos(t)) / (1 + (Math.sin(t) * Math.sin(t))); o.y = cy + (R * Math.sin(t) * Math.cos(t)) / (1 + (Math.sin(t) * Math.sin(t))); pathRy.push(o); }
}
function particlesArray() { particles.length = 0; for (var i = 0; i < pathRy.length; i += 1) { var particle = new Particle(pathRy[i].x, pathRy[i].y); particles.push(particle); }
}
buildTrajectory();
particlesArray();
function Draw() { requestId = window.requestAnimationFrame(Draw); frames += 1.5; ctx.clearRect(0, 0, cw, ch); for (var i = 0; i < particles.length; i += 1) { var n = ((~~frames - i) % particles.length); var p = particles[n]; p.R = i * p.speed; p.r = p.r0 - i / 10; p.x = pathRy[n].x + p.R * Math.cos(p.a); p.y = pathRy[n].y + p.R * Math.sin(p.a); particles[i].draw(); } ctx.globalCompositeOperation = "lighten";
}
function Init() { if (requestId) { window.cancelAnimationFrame(requestId); requestId = null; } cw = c.width = window.innerWidth; ch = c.height = window.innerHeight; cx = cw / 2; cy = ch / 2; R = cx / 2; buildTrajectory(); particlesArray(); Draw();
};
window.setTimeout(function() { Init(); window.addEventListener('resize', Init, false);
}, 15);
function randomIntFromInterval(mn, mx) { return ~~(Math.random() * (mx - mn + 1) + mn);
}
Circle decay - Script Codes
Circle decay - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4.5
Size 2,638 Kb
Views 32,384
Do you need developer help for Circle decay?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gabi (enxaneta) Script Codes
Name
Holy Cow Mandala
Rift
Sphere Within Sphere
Pastel dots net
Circular trail
Some flowers
Flexbox playground
Squiggly lines
CSS Filters
GRID table of contents
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!