canvas#canvas
.wrapper
.colorizer1
.colorizer2
.colorizer3
.colorizer4
.circles
- for (var x = 1; x <= 150; x++)
.circle
View Compiled
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to top left, #3F1344 10%, #4A1742 20%, #522357 50%, #5539B2);
height: 100vh;
overflow: hidden;
}
$primary_colors: #A135D8 #B13CC8 #D562C7 #BD369D #7022B6 #F777EE #D15BB1 #8E39A0 #6F38DC #6E44C2 #E2BCE1 #E8EBFA #D8B1F4 #DC59C1 #EAC5E6 #A83E9A #DFB2E9;
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: -11;
animation: spin 300s linear infinite;
transform-origin: 50% 50%;
}
.circle {
position: absolute;
border-radius: 50%;
}
@function create-palette() {
$palette: ();
@for $i from 1 through 150{
$palette: append($palette, mix(nth($primary_colors, random(length($primary_colors))), nth($primary_colors, random(length($primary_colors))), 60%));
}
@return $palette;
}
$palette: create-palette();
@each $color in $palette {
$size: random(100) + px;
.circle:nth-child(#{index($palette, $color)}){
background: $color;
box-shadow: 0 0 random(10) + px random(10) + px $color;
top: random(100) + 0%;
left: random(100) + 0%;
width: $size;
height: $size;
opacity: random(100) / 100;
animation: float#{index($palette, $color)} 20s infinite linear;
}
}
@for $i from 1 through 150 {
$movex: random(100) - 20 + px;
$movey: random(400) - 300 + px;
$movex2: random(200) - 50 + px;
$movey2: random(400) - 100 + px;
@keyframes float#{$i} {
40% {
transform: translateX($movex) translateY($movey);
}
80% {
transform: translateX($movex2) translateY($movey2);
}
}
}
.colorizer1, .colorizer2, .colorizer3, .colorizer4 {
position: absolute;
width: 300px;
height: 300px;
filter: blur(130px);
}
.colorizer1 {
border-radius: 50%;
background: linear-gradient(135deg, #A191AE, #dbdce0);
}
.colorizer2 {
top: 20%;
left: 70%;
background: #63568C;
}
.colorizer3 {
top: 80%;
left: -15%;
background: #2D0D34;
filter: blur(80px);
border-radius: 50%;
}
.colorizer4 {
top: 20%;
left: 35%;
width: 100px;
height: 100px;
background: #bbdebc;
filter: blur(80px);
border-radius: 50%;
}
@keyframes spin {
from {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
to {
transform: rotate(360deg);
}
}
View Compiled
(window.draw = function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
stars = 500,
colorrange = [0, 60, 240];
context.canvas.width = window.innerWidth + 300;
context.canvas.height = window.innerHeight + 300;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
for (var i = 0; i < stars; i++) {
var x = Math.random() * canvas.offsetWidth,
y = Math.random() * canvas.offsetHeight,
radius = Math.random() * 1.5,
hue = colorrange[getRandom(0, colorrange.length - 1)],
sat = getRandom(50, 100);
context.beginPath();
context.arc(x, y, radius, 0, 360);
context.fillStyle = "hsl(" + hue + ", " + sat + "%, 88%)";
context.fill();
}
})();
window.addEventListener("resize", draw);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.