Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
'use strict'; var c = document.querySelector('canvas'); var ctx = c.getContext('2d'); var dpr = devicePixelRatio; var w = 500; var h = 500; var cx = w / 2; var cy = h / 2; var count = 17; c.width = w * dpr; c.height = h * dpr; ctx.scale(dpr, dpr); function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); var now = Date.now(); var mod = Math.sin(now * 0.002); var modj = Math.sin(now * 0.004); var countk = 1 + 7 + mod * 8; var i = Math.ceil(countk); while (i--) { var segments = 3 + i; ctx.beginPath(); for (var j = 0; j < segments; j++) { var a = j / segments * Math.PI * 2 - Math.PI * -0.5 + modj * 0.1; a += 1 / segments * Math.PI; var r = 45 + i * 11.5 + mod * 25; var x = cx + Math.cos(a) * r; var y = cy + Math.sin(a) * r + (countk - segments) * 3.3 * mod; ctx[j === 0 ? 'moveTo' : 'lineTo'](x, y); } ctx.closePath(); ctx.lineWidth = 2 - i / count * 1.5; ctx.fillStyle = '#000'; ctx.fill(); ctx.strokeStyle = 'hsla(0, 100%, 100%, ' + (0.02 + (count - i) / count * 0.98) + ')'; ctx.stroke(); } } loop();
CSS
body { background: black; overflow: hidden; } canvas { bottom: 0; height: 500px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 500px; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email