Rainbow transfer

Developer
Matei Copot
Size
2,566 Kb
Views
14,168
  1. Rainbow transfer Previews
  2. Rainbow transfer HTML Codes
  3. Rainbow transfer CSS Codes
  4. Rainbow transfer JS Codes

How do I make an rainbow transfer?

What is a rainbow transfer? How do you make a rainbow transfer? This script and codes were developed by Matei Copot on 16 October 2022, Sunday.

Rainbow transfer Previews
IQ Test

Rainbow transfer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rainbow transfer</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {	margin: 0 0 0 0;	background-color: #222;
}
canvas {	position: absolute;	top: calc( 50% - 250px );	left: calc( 50% - 250px );	background-color: #333;	border-radius: 20%;	box-shadow: 0 0 10px black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas> <script src="js/index.js"></script>
</body>
</html>

Rainbow transfer - Script Codes CSS Codes

body {	margin: 0 0 0 0;	background-color: #222;
}
canvas {	position: absolute;	top: calc( 50% - 250px );	left: calc( 50% - 250px );	background-color: #333;	border-radius: 20%;	box-shadow: 0 0 10px black;
}

Rainbow transfer - Script Codes JS Codes

var s = c.width = c.height = 500,	ctx = c.getContext( '2d' ),	particles = [],	clouds = [],	cx = s / 2,	cy = s / 3 * 2,	cloudCx1 = cx - s / 3,	cloudCx2 = cx + s / 3;
ctx.lineWidth = 2;
function Particle(){	this.reset();
}
Particle.prototype.reset = function(){	this.rad = -Math.PI;	this.speed = .01 + Math.random() * .02;	var depth = Math.random() * 80;	this.color = 'hsl(hue,80%,50%)'.replace( 'hue', depth / 8 * 36 );	this.len = s / 3 + depth - 40;
}
Particle.prototype.step = function(){	ctx.strokeStyle = this.color;	ctx.beginPath();	ctx.arc( cx, cy, this.len, this.rad, this.rad += this.speed );	ctx.stroke();	if( this.rad > 0 )	this.reset();
}
function Cloud(){	this.reset();
}
Cloud.prototype.reset = function(){	this.x = Math.random() < .5 ? cloudCx1 : cloudCx2;	this.x += Math.random() * 50 * ( Math.random() < .5 ? 1 : -1 );	this.y = cy + Math.random() * 10 * ( Math.random() < .5 ? 1 : -1 );	this.maxRadius = 30 + 10 * Math.random();	this.tick = 0;	this.maxTick = ( 40 + 10 * Math.random() ) |0;
}
Cloud.prototype.step = function(){	++this.tick;	var radius = this.maxRadius * ( Math.cos( this.tick / this.maxTick * Math.PI * 2 - Math.PI ) / 2 + .5 ),	gradient = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, radius );	gradient.addColorStop( 0, 'rgba(255,255,255,1)' );	gradient.addColorStop( 1, 'rgba(255,255,255,0)' );	ctx.fillStyle = gradient;	ctx.beginPath();	ctx.arc( this.x, this.y, radius, 0, Math.PI * 2 );	ctx.fill();	if( this.tick > this.maxRadius )	this.reset();
}
function anim(){	window.requestAnimationFrame( anim );	ctx.fillStyle = 'rgba(0,0,0,.04)';	ctx.fillRect( 0, 0, s, s );	if( particles.length < 200 && Math.random() < .5 )	particles.push( new Particle );	if( clouds.length < 30 && Math.random() < .1 )	clouds.push( new Cloud );	particles.map( function( particle ){ particle.step(); } );	clouds.map( function( cloud ){ cloud.step(); } );
}
ctx.fillStyle = '#333';
ctx.fillRect( 0, 0, s, s );
anim();
Rainbow transfer - Script Codes
Rainbow transfer - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded October 16, 2022
Rating 4
Size 2,566 Kb
Views 14,168
Do you need developer help for Rainbow transfer?

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!

Matei Copot (towc) Script Codes
Name
Rainbow galaxy
Webgl fireworks
Binary spiral
Neural Network visualization
Invasion of creepy crawly rainbow fireflies
Mathematically armonic circular lines
Turret of Order
Hexagonical retro tiles
Random curve-pathed particles of rainbowness
Neon hexagon-forming particles
Create amazing SEO content 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!