In this article, we’ll explore the development of the ‘Cosmic Dreams’ project, a visually stunning space-themed animation built entirely using HTML and CSS. This project features a cosmic scene with a glowing character under a mystical eclipse, set against a backdrop of stars and planetary bodies.
Contents
Step 1: Setting Up the Basic StructureExplanation Of HTML Code1. <!DOCTYPE html>2. <html lang="en">3. <head> Section4. <body>5. Stars and Planets6. Star Tails7. Scene Elements8. The Cuboid Object9. Audio Button and Sound10. Filters and SVG11. JavaScriptStep 2: Adding StyleExplanation Of CSS CodeFinal Result Of Cosmic Dreams AnimationConclusion:
Let’s break down the design and explain how to recreate this beautiful scene.
Step 1: Setting Up the Basic Structure
We’ll start by laying out the basic structure of our HTML. This includes containers for the stars, character, planets, and other elements of the cosmic scene.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cosmic Dreams ✨ (CSS)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="stars"></div>
<div class="stars-highlights"></div>
<div class="planets">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="planets-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="startails">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="scene">
<div class="sun"></div>
<div class="planet"></div>
<div class="planet-2"></div>
<div class="planet-3"></div>
<div class="planet-4"></div>
<div class="planet-6"></div>
<div class="planet-5">
<div class="structure-1"></div>
<div class="structure-2"></div>
<div class="structure-3"></div>
</div>
<div class="human">
<div class="neck"></div>
<div class="head"></div>
<div class="body">
<div class="shoulder"></div>
<div class="back"></div>
<div class="hip">
<div class="center"></div>
</div>
</div>
<div class="leg left">
<div class="knee"></div>
<div class="lower"></div>
</div>
<div class="leg right">
<div class="knee"></div>
<div class="lower"></div>
</div>
<div class="arm left">
<div class="hand"></div>
</div>
<div class="arm right">
<div class="hand"></div>
</div>
</div>
<div class="human shadow">
<div class="neck"></div>
<div class="head"></div>
<div class="body">
<div class="shoulder"></div>
<div class="back"></div>
<div class="hip">
<div class="center"></div>
</div>
</div>
<div class="leg left">
<div class="knee"></div>
<div class="lower"></div>
</div>
<div class="leg right">
<div class="knee"></div>
<div class="lower"></div>
</div>
<div class="arm left">
<div class="hand"></div>
</div>
<div class="arm right">
<div class="hand"></div>
</div>
</div>
<div class="cuboid">
<div class="object">
<div class="body"></div>
</div>
<div class="top">
<div class="outline"></div>
<div class="outline"></div>
<div class="outline"></div>
<div class="outline"></div>
</div>
<div class="front"></div>
<div class="right"></div>
</div>
</div>
<button id="audiobutton" class="audio-icon-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<audio id="audio" loop src="https://assets.codepen.io/907471/cosmic_dreams.mp3"></audio>
<div class="highlight"></div>
<div class="color-filter"></div>
<svg class=filter xmlns="http://www.w3.org/2000/svg">
<filter id="stars">
<feTurbulence baseFrequency="0.275" />
<feColorMatrix values="0 0 0 9 -5
0 0 0 9 -4
0 0 0 9 -5
0 0 0 0 1" />
</filter>
<filter id="stars-highlights">
<feTurbulence baseFrequency="0.675" />
<feColorMatrix values="0 0 0 9 -5
0 0 0 9 -4
0 0 0 9 -5
0 0 0 0 1" />
</filter>
<filter id="planet-structure">
<feTurbulence baseFrequency="0.195" />
<feColorMatrix values="0 0 0 1 -9
0 0 0 9 -1.5
0 0 0 2 -6
0 0 0 0 1" />
</filter>
</svg>
<script>
(() => {
window.audiobutton.addEventListener('click', () => {
if (window.audio.paused) {
window.audio.play();
} else {
window.audio.pause();
}
});
})();
</script>
<!-- partial -->
<script src='https://codepen.io/konstantindenerz/pen/KKxvdPq.js'></script>
</body>
</html>
Explanation Of HTML Code
1. <!DOCTYPE html>
The <!DOCTYPE html> declaration defines the document type and version of HTML. In this case, it’s HTML5. This is important because it tells the browser how to interpret the HTML code, ensuring modern HTML and CSS features work correctly.
2. <html lang="en">
The <html> tag is the root element of the HTML document. The lang="en" attribute specifies the language of the document, which helps search engines and browsers understand that the content is in English.
3. <head> Section
The <head> element contains metadata and links to external resources like CSS stylesheets and JavaScript files.
<meta charset="UTF-8">: This tag specifies the character encoding of the document as UTF-8, which supports all characters, including special symbols like emojis.<title>Cosmic Dreams ✨ (CSS)</title>: The<title>element defines the title of the webpage, which appears in the browser tab. Here, it includes the title “Cosmic Dreams ✨ (CSS)”.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">: This line links to an external stylesheet called “normalize.css”, which resets default browser styling. This helps ensure consistency in styling across different browsers.<link rel="stylesheet" href="./style.css">: This line links to your custom stylesheet (style.css), where all the CSS for the ‘Cosmic Dreams’ project is written.
4. <body>
The <body> tag contains all the visible content of the webpage, including the cosmic scene with stars, planets, and the human figure.
<!-- partial:index.partial.html -->: This is a comment indicating a section of the code that could be a partial file (used in templating engines). It doesn’t affect the code but may be a note for developers.
5. Stars and Planets
<div class="stars"></div>: This empty<div>element represents the background stars in the scene. Its visual appearance will be controlled by CSS.<div class="stars-highlights"></div>: This<div>is used to add highlights or twinkles to the stars, enhancing their appearance.<div class="planets">and<div class="planets-2">: These are containers that hold multiple empty<div>elements. Each one represents a planet or celestial object in the scene. The positioning, size, and color of the planets are controlled via CSS. The number of planets is large to simulate a complex space environment.
6. Star Tails
<div class="startails">: Similar to the stars and planets, this<div>contains multiple smaller elements, each representing a star tail or streak. These can be animated with CSS to create a “shooting star” effect.
7. Scene Elements
<div class="scene">: This<div>wraps all the major objects, such as the sun and various planets.<div class="sun"></div>,<div class="planet"></div>, etc.: Each of these represents an individual celestial body like the sun or planets. These objects will have specific animations and transformations applied to them via CSS.<div class="human">: This<div>contains the human figure standing in the scene. Inside it, you have elements for different body parts like the neck, head, body, arms, and legs. Each part has its own<div>to control its shape, size, and animation.<div class="human shadow">: This is a duplicate of the human figure but used to create a shadow effect that gives depth to the character.
8. The Cuboid Object
<div class="cuboid">: This element is used to represent a 3D object (cuboid) within the scene. It contains multiple child elements such as.object,.top,.front, and.right, each representing different faces or sides of the cuboid.
9. Audio Button and Sound
<button id="audiobutton" class="audio-icon-button">: This is a button element that, when clicked, plays or pauses the background music. The button has bars (represented by empty<div>elements) to indicate audio control.<audio id="audio" loop src="https://assets.codepen.io/907471/cosmic_dreams.mp3"></audio>: This is the audio element that plays the “cosmic dreams” soundtrack. It loops continuously when played.
10. Filters and SVG
<svg class="filter" xmlns="http://www.w3.org/2000/svg">: This SVG element contains filter effects that will be applied to certain elements like stars and planets.<filter id="stars">and<filter id="stars-highlights">: These are SVG filter effects applied to the stars to create turbulence and a glowing look, enhancing their appearance.<filter id="planet-structure">: This filter adds visual distortion or texture to the planets to make them look more dynamic.
11. JavaScript
- The
<script>section contains JavaScript code that toggles the audio when the audio button is clicked.
(() => {
window.audiobutton.addEventListener('click', () => {
if (window.audio.paused) {
window.audio.play();
} else {
window.audio.pause();
}
});
})();
This script waits for a click event on the audiobutton element. When clicked, it checks if the audio is playing. If not, it plays the audio; otherwise, it pauses it.
Step 2: Adding Style
@charset "UTF-8";
@layer tokens {
:root {
--color-primary: rgba(220, 219, 219, 0.78);
--color-surface: #242425;
--time: 24s;
}
}
@property --shadow-color {
syntax: "<color>";
initial-value: transparent;
inherits: true;
}
@layer stars {
.stars {
position: absolute;
width: 100vmax;
height: 100vmax;
}
.stars:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
filter: url(#stars) saturate(0) brightness(1.5);
mix-blend-mode: overlay;
opacity: 0.15;
-webkit-animation: stars-animation 20s ease-in-out infinite;
animation: stars-animation 20s ease-in-out infinite;
}
.stars-highlights {
position: absolute;
width: 100vw;
height: 100vh;
opacity: 0.6;
}
.stars-highlights:before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
filter: url(#stars-highlights) saturate(0) brightness(1.5);
mix-blend-mode: lighten;
opacity: 0.2;
-webkit-animation: stars-animation-2 20s ease-in-out infinite;
animation: stars-animation-2 20s ease-in-out infinite;
}
@-webkit-keyframes stars-animation {
from {
translate: 1vmin 2vmin;
rotate: 0deg;
}
30% {
translate: 1vmin -2vmin;
}
50% {
translate: -1vmin 2vmin;
rotate: 10deg;
}
to {
translate: 1vmin 2vmin;
rotate: 0deg;
}
}
@keyframes stars-animation {
from {
translate: 1vmin 2vmin;
rotate: 0deg;
}
30% {
translate: 1vmin -2vmin;
}
50% {
translate: -1vmin 2vmin;
rotate: 10deg;
}
to {
translate: 1vmin 2vmin;
rotate: 0deg;
}
}
@-webkit-keyframes stars-animation-2 {
from {
translate: 1vmin -2vmin;
}
30% {
translate: -1vmin -2vmin;
}
50% {
translate: 1vmin -2vmin;
}
to {
translate: 1vmin -2vmin;
}
}
@keyframes stars-animation-2 {
from {
translate: 1vmin -2vmin;
}
30% {
translate: -1vmin -2vmin;
}
50% {
translate: 1vmin -2vmin;
}
to {
translate: 1vmin -2vmin;
}
}
.startails {
position: absolute;
inset: 0;
opacity: 0.6;
}
.startails > div {
--distance: 20vmax;
border-radius: 50%;
width: 0.55vmax;
aspect-ratio: 3/1;
background: white;
translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
opacity: 0;
-webkit-animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
box-shadow: 0 0 0.2vmax white;
}
.startails > div:nth-of-type(1) {
--x: 0.1730470871;
--y: 0.2473814619;
--x2: -0.3965582804;
--y2: -0.1083905392;
--delay: 0.5059114693;
}
.startails > div:nth-of-type(2) {
--x: 0.69705832;
--y: 0.508543067;
--x2: 0.4346225109;
--y2: 0.2500567052;
--delay: 0.3876695989;
}
.startails > div:nth-of-type(3) {
--x: 0.1732710239;
--y: 0.0711056124;
--x2: -0.3301476142;
--y2: -0.3329507021;
--delay: 0.6093910475;
}
.startails > div:nth-of-type(4) {
--x: 0.5351017025;
--y: 0.5251999338;
--x2: 0.1821814329;
--y2: -0.0359717169;
--delay: 0.8560336844;
}
.startails > div:nth-of-type(5) {
--x: 0.8486719997;
--y: 0.2712707622;
--x2: -0.231207985;
--y2: 0.0727343052;
--delay: 0.3383985166;
}
.startails > div:nth-of-type(6) {
--x: 0.7806111538;
--y: 0.4877704424;
--x2: -0.4861100053;
--y2: 0.173593381;
--delay: 0.643982654;
}
.startails > div:nth-of-type(7) {
--x: 0.4201818957;
--y: 0.8908269625;
--x2: -0.0804621107;
--y2: 0.4726141056;
--delay: 0.987175278;
}
.startails > div:nth-of-type(8) {
--x: 0.3965855499;
--y: 0.5673610973;
--x2: -0.1384898833;
--y2: 0.0539627375;
--delay: 0.0630836196;
}
.startails > div:nth-of-type(9) {
--x: 0.4715368887;
--y: 0.1919473597;
--x2: -0.0179013968;
--y2: -0.1712213613;
--delay: 0.7509233875;
}
.startails > div:nth-of-type(10) {
--x: 0.5461642024;
--y: 0.5398303335;
--x2: -0.1874287939;
--y2: 0.1899498005;
--delay: 0.8318566328;
}
.startails > div:nth-of-type(11) {
--x: 0.1658875273;
--y: 0.043220459;
--x2: 0.4574881589;
--y2: -0.0162094208;
--delay: 0.5797921543;
}
.startails > div:nth-of-type(12) {
--x: 0.9721235902;
--y: 0.7157003672;
--x2: -0.4501572535;
--y2: 0.1091777235;
--delay: 0.5001242269;
}
.startails > div:nth-of-type(13) {
--x: 0.7905260241;
--y: 0.3416492501;
--x2: -0.0339659553;
--y2: -0.4058192707;
--delay: 0.1689112505;
}
.startails > div:nth-of-type(14) {
--x: 0.0757892438;
--y: 0.2380827459;
--x2: 0.0781701485;
--y2: 0.4023814574;
--delay: 0.2268748624;
}
.startails > div:nth-of-type(15) {
--x: 0.85722716;
--y: 0.1122420986;
--x2: 0.3729182597;
--y2: -0.1724558398;
--delay: 0.584625375;
}
.startails > div:nth-of-type(16) {
--x: 0.6048869264;
--y: 0.156856114;
--x2: -0.4469074312;
--y2: 0.4678889301;
--delay: 0.7390032148;
}
.startails > div:nth-of-type(17) {
--x: 0.1484330182;
--y: 0.3723776014;
--x2: -0.2944912667;
--y2: 0.1075636075;
--delay: 0.9767988124;
}
.startails > div:nth-of-type(18) {
--x: 0.7664430599;
--y: 0.6072440899;
--x2: -0.2425224638;
--y2: -0.4567402818;
--delay: 0.9897945782;
}
.startails > div:nth-of-type(19) {
--x: 0.7115402475;
--y: 0.5090490719;
--x2: 0.0240866776;
--y2: -0.1959197178;
--delay: 0.2994264994;
}
.startails > div:nth-of-type(20) {
--x: 0.1283004411;
--y: 0.7042365145;
--x2: -0.4951669473;
--y2: -0.2210477655;
--delay: 0.1739475032;
}
.startails > div:nth-of-type(21) {
--x: 0.9206791737;
--y: 0.9702524453;
--x2: -0.0530558369;
--y2: -0.055463316;
--delay: 0.368604227;
}
.startails > div:nth-of-type(22) {
--x: 0.1605731337;
--y: 0.7250892518;
--x2: 0.3257729131;
--y2: 0.3835083883;
--delay: 0.331029701;
}
.startails > div:nth-of-type(23) {
--x: 0.4180780679;
--y: 0.1007620108;
--x2: -0.0307317921;
--y2: -0.126193256;
--delay: 0.0789119246;
}
.startails > div:nth-of-type(24) {
--x: 0.0188754624;
--y: 0.1311836443;
--x2: -0.076370086;
--y2: 0.0342791998;
--delay: 0.1799779882;
}
.startails > div:nth-of-type(25) {
--x: 0.6235906932;
--y: 0.6251513533;
--x2: 0.0959223095;
--y2: 0.2016181401;
--delay: 0.1527471598;
}
.startails > div:nth-of-type(26) {
--x: 0.9440117119;
--y: 0.1393030745;
--x2: -0.4744936029;
--y2: 0.1992876669;
--delay: 0.60395541;
}
.startails > div:nth-of-type(27) {
--x: 0.5299560298;
--y: 0.1347828605;
--x2: 0.0420783981;
--y2: -0.2552333367;
--delay: 0.6455227217;
}
.startails > div:nth-of-type(28) {
--x: 0.924339748;
--y: 0.7791305192;
--x2: -0.4774496341;
--y2: -0.3722654721;
--delay: 0.9346934307;
}
.startails > div:nth-of-type(29) {
--x: 0.5441581276;
--y: 0.844410242;
--x2: -0.3165871512;
--y2: 0.4332790487;
--delay: 0.001391858;
}
.startails > div:nth-of-type(30) {
--x: 0.9406656224;
--y: 0.4778694235;
--x2: -0.2455175166;
--y2: 0.0454192985;
--delay: 0.6465834896;
}
.startails > div:nth-of-type(31) {
--x: 0.9527054874;
--y: 0.7684492331;
--x2: -0.3648265499;
--y2: 0.0184352857;
--delay: 0.6483489293;
}
.startails > div:nth-of-type(32) {
--x: 0.9104835302;
--y: 0.6551543204;
--x2: 0.3991311381;
--y2: 0.012985797;
--delay: 0.8729058178;
}
.startails > div:nth-of-type(33) {
--x: 0.2320759106;
--y: 0.3141084284;
--x2: -0.3855026409;
--y2: 0.1335298936;
--delay: 0.131491139;
}
.startails > div:nth-of-type(34) {
--x: 0.0053593153;
--y: 0.6941891436;
--x2: -0.4799639332;
--y2: -0.3592598957;
--delay: 0.303954652;
}
.startails > div:nth-of-type(35) {
--x: 0.5376459806;
--y: 0.7238249703;
--x2: -0.1250949581;
--y2: -0.0130195463;
--delay: 0.5463660209;
}
.startails > div:nth-of-type(36) {
--x: 0.3862199169;
--y: 0.5512134562;
--x2: -0.061734125;
--y2: 0.0794175162;
--delay: 0.5533817307;
}
.startails > div:nth-of-type(37) {
--x: 0.4998178187;
--y: 0.5444439503;
--x2: -0.18711297;
--y2: 0.3129171186;
--delay: 0.126075104;
}
.startails > div:nth-of-type(38) {
--x: 0.1118313096;
--y: 0.3255755733;
--x2: 0.0571080155;
--y2: -0.3399907401;
--delay: 0.4331454972;
}
.startails > div:nth-of-type(39) {
--x: 0.5873638668;
--y: 0.940439758;
--x2: -0.0542973184;
--y2: -0.390037105;
--delay: 0.198287888;
}
.startails > div:nth-of-type(40) {
--x: 0.3702006574;
--y: 0.5546949238;
--x2: 0.3139805797;
--y2: -0.1855903798;
--delay: 0.5920802465;
}
.startails > div:nth-of-type(41) {
--x: 0.0266486648;
--y: 0.6139616074;
--x2: 0.3856684534;
--y2: -0.1854297896;
--delay: 0.4431905464;
}
.startails > div:nth-of-type(42) {
--x: 0.4866061879;
--y: 0.1304741791;
--x2: 0.1454241242;
--y2: -0.0585773041;
--delay: 0.7040839642;
}
.startails > div:nth-of-type(43) {
--x: 0.1716795746;
--y: 0.5398904645;
--x2: 0.2086894608;
--y2: 0.2335858962;
--delay: 0.927044617;
}
.startails > div:nth-of-type(44) {
--x: 0.8421423114;
--y: 0.7234938778;
--x2: 0.0300741089;
--y2: 0.1699630716;
--delay: 0.2076548366;
}
.startails > div:nth-of-type(45) {
--x: 0.0521923505;
--y: 0.2376611928;
--x2: 0.3674976749;
--y2: 0.0147281145;
--delay: 0.0757558712;
}
.startails > div:nth-of-type(46) {
--x: 0.0324303785;
--y: 0.740497964;
--x2: 0.4572203461;
--y2: 0.4573872972;
--delay: 0.6281219278;
}
.startails > div:nth-of-type(47) {
--x: 0.6658436898;
--y: 0.7923708612;
--x2: 0.4034848846;
--y2: 0.0082442386;
--delay: 0.5521064885;
}
.startails > div:nth-of-type(48) {
--x: 0.5092573842;
--y: 0.4091932258;
--x2: 0.0945525703;
--y2: 0.4924651454;
--delay: 0.2370436613;
}
.startails > div:nth-of-type(49) {
--x: 0.60654475;
--y: 0.8740218622;
--x2: 0.2217361909;
--y2: -0.4516483047;
--delay: 0.3640706435;
}
.startails > div:nth-of-type(50) {
--x: 0.6578985759;
--y: 0.3296424876;
--x2: -0.43163515;
--y2: -0.0390480515;
--delay: 0.3220858825;
}
.startails > div:nth-of-type(51) {
--x: 0.0086566848;
--y: 0.0387156398;
--x2: 0.1066368299;
--y2: -0.1444158807;
--delay: 0.336614798;
}
.startails > div:nth-of-type(52) {
--x: 0.6948951573;
--y: 0.2717754761;
--x2: -0.3659490542;
--y2: 0.3112304995;
--delay: 0.3002417838;
}
.startails > div:nth-of-type(53) {
--x: 0.7244187683;
--y: 0.3195881412;
--x2: -0.2464464119;
--y2: 0.4584727159;
--delay: 0.6595815557;
}
.startails > div:nth-of-type(54) {
--x: 0.2088886033;
--y: 0.6088453115;
--x2: -0.0197012628;
--y2: -0.141991886;
--delay: 0.2262191888;
}
.startails > div:nth-of-type(55) {
--x: 0.0778330385;
--y: 0.701012987;
--x2: -0.2614946824;
--y2: 0.3915896911;
--delay: 0.1391218876;
}
.startails > div:nth-of-type(56) {
--x: 0.9578886988;
--y: 0.2967412412;
--x2: 0.2948034358;
--y2: -0.4700096216;
--delay: 0.2332340439;
}
.startails > div:nth-of-type(57) {
--x: 0.233233672;
--y: 0.6563517898;
--x2: -0.2711188006;
--y2: -0.3144233538;
--delay: 0.344487703;
}
.startails > div:nth-of-type(58) {
--x: 0.8711494602;
--y: 0.3657435753;
--x2: 0.4572713932;
--y2: 0.0121134723;
--delay: 0.7827136211;
}
.startails > div:nth-of-type(59) {
--x: 0.6030820029;
--y: 0.5596463181;
--x2: 0.4125289902;
--y2: -0.0461106212;
--delay: 0.3190285917;
}
.startails > div:nth-of-type(60) {
--x: 0.1902266982;
--y: 0.5148647593;
--x2: 0.1433180681;
--y2: 0.4679555673;
--delay: 0.5735064455;
}
.startails > div:nth-of-type(61) {
--x: 0.9657184634;
--y: 0.65243306;
--x2: 0.4362053571;
--y2: -0.1759970065;
--delay: 0.3741170031;
}
.startails > div:nth-of-type(62) {
--x: 0.2500343301;
--y: 0.9482931723;
--x2: -0.4030206604;
--y2: -0.1842487181;
--delay: 0.8381764435;
}
.startails > div:nth-of-type(63) {
--x: 0.4154993582;
--y: 0.1369565246;
--x2: -0.3202266212;
--y2: -0.0273229535;
--delay: 0.2824405577;
}
.startails > div:nth-of-type(64) {
--x: 0.9802220142;
--y: 0.1357379051;
--x2: -0.1960478324;
--y2: -0.0032993479;
--delay: 0.5167384998;
}
.startails > div:nth-of-type(65) {
--x: 0.1497286622;
--y: 0.1889688461;
--x2: 0.1261610642;
--y2: -0.4408143018;
--delay: 0.3954046715;
}
.startails > div:nth-of-type(66) {
--x: 0.1714286081;
--y: 0.6218270697;
--x2: 0.4956020462;
--y2: 0.166458463;
--delay: 0.2538925506;
}
.startails > div:nth-of-type(67) {
--x: 0.7115747938;
--y: 0.6938418876;
--x2: 0.3082988008;
--y2: 0.4675840776;
--delay: 0.8653293722;
}
.startails > div:nth-of-type(68) {
--x: 0.9251935262;
--y: 0.0948655336;
--x2: -0.112460185;
--y2: -0.0783383769;
--delay: 0.1750132013;
}
.startails > div:nth-of-type(69) {
--x: 0.4774971633;
--y: 0.7376323444;
--x2: -0.2034841119;
--y2: -0.1475172429;
--delay: 0.4068375202;
}
.startails > div:nth-of-type(70) {
--x: 0.9757958493;
--y: 0.7022902422;
--x2: -0.2963561424;
--y2: -0.176199337;
--delay: 0.7314615089;
}
.startails > div:nth-of-type(71) {
--x: 0.0626227545;
--y: 0.361762547;
--x2: 0.4148273052;
--y2: 0.253517206;
--delay: 0.4943591749;
}
.startails > div:nth-of-type(72) {
--x: 0.2800430068;
--y: 0.9993009348;
--x2: 0.1323086143;
--y2: 0.4178647646;
--delay: 0.6083385724;
}
.startails > div:nth-of-type(73) {
--x: 0.1866542348;
--y: 0.3378079955;
--x2: -0.1696691303;
--y2: -0.1372293987;
--delay: 0.5886134649;
}
.startails > div:nth-of-type(74) {
--x: 0.4606895638;
--y: 0.8743294434;
--x2: 0.3047901859;
--y2: 0.3397054407;
--delay: 0.0307915355;
}
.startails > div:nth-of-type(75) {
--x: 0.9757671539;
--y: 0.308340848;
--x2: -0.1726939804;
--y2: 0.1563160071;
--delay: 0.7480856498;
}
.startails > div:nth-of-type(76) {
--x: 0.3962823017;
--y: 0.7013531048;
--x2: -0.2737695058;
--y2: 0.4037296089;
--delay: 0.7563437369;
}
.startails > div:nth-of-type(77) {
--x: 0.4970667678;
--y: 0.9715857545;
--x2: -0.0559262083;
--y2: 0.0223602116;
--delay: 0.441233816;
}
.startails > div:nth-of-type(78) {
--x: 0.339114779;
--y: 0.3261991953;
--x2: 0.1773439237;
--y2: 0.0682014746;
--delay: 0.6882161555;
}
.startails > div:nth-of-type(79) {
--x: 0.0657799698;
--y: 0.5386198011;
--x2: 0.1468899533;
--y2: -0.1500596451;
--delay: 0.5968906157;
}
.startails > div:nth-of-type(80) {
--x: 0.8547472428;
--y: 0.6413987458;
--x2: 0.4972440608;
--y2: -0.0427731059;
--delay: 0.4524308413;
}
.startails > div:nth-of-type(81) {
--x: 0.5285425316;
--y: 0.5007938696;
--x2: 0.2022606174;
--y2: -0.3805990008;
--delay: 0.5424242204;
}
.startails > div:nth-of-type(82) {
--x: 0.4719665123;
--y: 0.7637577683;
--x2: -0.4797780819;
--y2: -0.2625262763;
--delay: 0.166154036;
}
.startails > div:nth-of-type(83) {
--x: 0.9554749676;
--y: 0.4285157504;
--x2: 0.4926852468;
--y2: -0.3075240092;
--delay: 0.0991661353;
}
.startails > div:nth-of-type(84) {
--x: 0.1275871297;
--y: 0.3020675999;
--x2: 0.3205268085;
--y2: 0.4526657372;
--delay: 0.9534231229;
}
.startails > div:nth-of-type(85) {
--x: 0.3595682418;
--y: 0.6201398797;
--x2: 0.4285544378;
--y2: -0.2266357883;
--delay: 0.3861198177;
}
.startails > div:nth-of-type(86) {
--x: 0.206857846;
--y: 0.4517768136;
--x2: -0.0803489479;
--y2: -0.0114906552;
--delay: 0.5954737133;
}
.startails > div:nth-of-type(87) {
--x: 0.4761134128;
--y: 0.0390502898;
--x2: 0.2192437389;
--y2: 0.0946995215;
--delay: 0.6495441824;
}
.startails > div:nth-of-type(88) {
--x: 0.1775401107;
--y: 0.1347717025;
--x2: 0.0559144624;
--y2: -0.190330161;
--delay: 0.4647195003;
}
.startails > div:nth-of-type(89) {
--x: 0.7163084793;
--y: 0.9284118141;
--x2: -0.1346278156;
--y2: 0.0064138405;
--delay: 0.4341765284;
}
.startails > div:nth-of-type(90) {
--x: 0.1829658968;
--y: 0.408425572;
--x2: -0.1570304441;
--y2: -0.1396395559;
--delay: 0.5519469412;
}
.startails > div:nth-of-type(91) {
--x: 0.1462352956;
--y: 0.5658018804;
--x2: -0.1030073389;
--y2: 0.2243736144;
--delay: 0.5607282311;
}
.startails > div:nth-of-type(92) {
--x: 0.4444378857;
--y: 0.8496278908;
--x2: 0.2723321235;
--y2: -0.3634843534;
--delay: 0.9917619352;
}
.startails > div:nth-of-type(93) {
--x: 0.6127468968;
--y: 0.7822096039;
--x2: 0.2364826093;
--y2: -0.1052837289;
--delay: 0.974789992;
}
.startails > div:nth-of-type(94) {
--x: 0.1645951492;
--y: 0.5429220511;
--x2: -0.2222974413;
--y2: 0.3522456995;
--delay: 0.3297477706;
}
.startails > div:nth-of-type(95) {
--x: 0.0440316597;
--y: 0.1671105523;
--x2: -0.3797214929;
--y2: 0.3386142117;
--delay: 0.9325117054;
}
.startails > div:nth-of-type(96) {
--x: 0.4559118485;
--y: 0.1485702556;
--x2: -0.3828789819;
--y2: -0.1425076274;
--delay: 0.0119113053;
}
.startails > div:nth-of-type(97) {
--x: 0.3025760291;
--y: 0.3131459962;
--x2: -0.4586169609;
--y2: 0.085944271;
--delay: 0.0441379062;
}
.startails > div:nth-of-type(98) {
--x: 0.0739505993;
--y: 0.4964883076;
--x2: -0.103913184;
--y2: 0.0874027666;
--delay: 0.9007982116;
}
.startails > div:nth-of-type(99) {
--x: 0.3108554291;
--y: 0.8075910001;
--x2: -0.2676389542;
--y2: 0.4963772556;
--delay: 0.2335827843;
}
.startails > div:nth-of-type(100) {
--x: 0.7520638632;
--y: 0.7269855547;
--x2: -0.1876010646;
--y2: -0.0154951169;
--delay: 0.1605458385;
}
.startails > div:nth-of-type(101) {
--x: 0.3441410788;
--y: 0.6966391765;
--x2: 0.0857672094;
--y2: 0.3481191391;
--delay: 0.5415905445;
}
.startails > div:nth-of-type(102) {
--x: 0.1033255305;
--y: 0.6765416335;
--x2: 0.3095167244;
--y2: -0.2393476811;
--delay: 0.1150246342;
}
.startails > div:nth-of-type(103) {
--x: 0.8980856373;
--y: 0.8117415978;
--x2: -0.1196169503;
--y2: -0.1124673124;
--delay: 0.2103747388;
}
.startails > div:nth-of-type(104) {
--x: 0.4547978713;
--y: 0.3912115506;
--x2: 0.4126895638;
--y2: 0.1022205463;
--delay: 0.5207326369;
}
.startails > div:nth-of-type(105) {
--x: 0.6048180663;
--y: 0.7033546656;
--x2: 0.3238989097;
--y2: -0.4175291713;
--delay: 0.6330140112;
}
.startails > div:nth-of-type(106) {
--x: 0.7463054393;
--y: 0.5532820632;
--x2: 0.0639183088;
--y2: 0.2639269673;
--delay: 0.5469865649;
}
.startails > div:nth-of-type(107) {
--x: 0.4839621455;
--y: 0.6298504042;
--x2: 0.0389879137;
--y2: 0.1407311618;
--delay: 0.4719890753;
}
.startails > div:nth-of-type(108) {
--x: 0.8623692859;
--y: 0.8824198233;
--x2: 0.4546867354;
--y2: 0.0410671975;
--delay: 0.9268472622;
}
.startails > div:nth-of-type(109) {
--x: 0.7625821104;
--y: 0.1789412195;
--x2: -0.3018373417;
--y2: 0.1375479383;
--delay: 0.6142566263;
}
.startails > div:nth-of-type(110) {
--x: 0.5057895649;
--y: 0.5888574708;
--x2: 0.4559137688;
--y2: -0.028824317;
--delay: 0.7828628143;
}
.startails > div:nth-of-type(111) {
--x: 0.5939128681;
--y: 0.9975425035;
--x2: 0.198071937;
--y2: -0.051381797;
--delay: 0.2452911132;
}
.startails > div:nth-of-type(112) {
--x: 0.3679164403;
--y: 0.7041190278;
--x2: 0.1060731939;
--y2: -0.0410949764;
--delay: 0.92908168;
}
.startails > div:nth-of-type(113) {
--x: 0.4282710045;
--y: 0.4756783434;
--x2: 0.1328065049;
--y2: 0.3243206792;
--delay: 0.7366022833;
}
.startails > div:nth-of-type(114) {
--x: 0.2396599262;
--y: 0.6712211639;
--x2: 0.15097823;
--y2: 0.2129672449;
--delay: 0.7513155716;
}
.startails > div:nth-of-type(115) {
--x: 0.6174428055;
--y: 0.2097025194;
--x2: 0.0043124159;
--y2: 0.2987934913;
--delay: 0.4856978884;
}
.startails > div:nth-of-type(116) {
--x: 0.162423945;
--y: 0.6754251593;
--x2: -0.1381404577;
--y2: 0.4076850526;
--delay: 0.9151324475;
}
.startails > div:nth-of-type(117) {
--x: 0.9265313276;
--y: 0.7959730758;
--x2: 0.1892250285;
--y2: -0.1018562176;
--delay: 0.677509841;
}
.startails > div:nth-of-type(118) {
--x: 0.5780306778;
--y: 0.7130035543;
--x2: -0.2502068158;
--y2: -0.4993556098;
--delay: 0.7726459476;
}
.startails > div:nth-of-type(119) {
--x: 0.6808745864;
--y: 0.0492595115;
--x2: 0.4129896515;
--y2: -0.3711424145;
--delay: 0.2068147649;
}
.startails > div:nth-of-type(120) {
--x: 0.486270744;
--y: 0.6189666711;
--x2: -0.1785264386;
--y2: 0.1080948522;
--delay: 0.646379283;
}
.startails > div:nth-of-type(121) {
--x: 0.6918788579;
--y: 0.1637742202;
--x2: 0.3817324011;
--y2: 0.2942072167;
--delay: 0.6736981304;
}
.startails > div:nth-of-type(122) {
--x: 0.4268026288;
--y: 0.1885254049;
--x2: -0.4412177419;
--y2: 0.1071320344;
--delay: 0.9932718771;
}
.startails > div:nth-of-type(123) {
--x: 0.5368469458;
--y: 0.5012394472;
--x2: 0.052009525;
--y2: -0.1969799695;
--delay: 0.0936389972;
}
.startails > div:nth-of-type(124) {
--x: 0.5926920486;
--y: 0.6786005889;
--x2: 0.0744114709;
--y2: -0.0319769041;
--delay: 0.724466129;
}
.startails > div:nth-of-type(125) {
--x: 0.2272420761;
--y: 0.6229018717;
--x2: 0.3544340729;
--y2: 0.0973192291;
--delay: 0.5934643549;
}
.startails > div:nth-of-type(126) {
--x: 0.8016214649;
--y: 0.4652233816;
--x2: -0.4195160052;
--y2: 0.0860748242;
--delay: 0.3970078114;
}
.startails > div:nth-of-type(127) {
--x: 0.6578312636;
--y: 0.1390029181;
--x2: -0.048259381;
--y2: -0.2911324029;
--delay: 0.8714556218;
}
.startails > div:nth-of-type(128) {
--x: 0.4978562131;
--y: 0.9540404655;
--x2: -0.3266902384;
--y2: 0.2665507925;
--delay: 0.1244556865;
}
.startails > div:nth-of-type(129) {
--x: 0.9881992122;
--y: 0.8905826032;
--x2: 0.108863058;
--y2: 0.3524059812;
--delay: 0.2064240525;
}
.startails > div:nth-of-type(130) {
--x: 0.5748721663;
--y: 0.6425239925;
--x2: 0.4486787047;
--y2: -0.0772050346;
--delay: 0.8264214161;
}
.startails > div:nth-of-type(131) {
--x: 0.4718054592;
--y: 0.2719236404;
--x2: 0.462043976;
--y2: -0.4200225288;
--delay: 0.9976018804;
}
.startails > div:nth-of-type(132) {
--x: 0.9089161652;
--y: 0.438129024;
--x2: 0.3619433959;
--y2: 0.1455770776;
--delay: 0.0764474173;
}
.startails > div:nth-of-type(133) {
--x: 0.7336679707;
--y: 0.9595507361;
--x2: 0.3219013941;
--y2: -0.2840025348;
--delay: 0.2410793121;
}
.startails > div:nth-of-type(134) {
--x: 0.4349117202;
--y: 0.4361516983;
--x2: 0.0292056238;
--y2: -0.1734513364;
--delay: 0.0517057003;
}
.startails > div:nth-of-type(135) {
--x: 0.6389648082;
--y: 0.8399777072;
--x2: -0.3151111175;
--y2: -0.4280724627;
--delay: 0.040692236;
}
.startails > div:nth-of-type(136) {
--x: 0.230867553;
--y: 0.9848612983;
--x2: 0.1730698847;
--y2: -0.0345121438;
--delay: 0.3076363307;
}
.startails > div:nth-of-type(137) {
--x: 0.2080026121;
--y: 0.2270158352;
--x2: -0.1082114673;
--y2: 0.1402671327;
--delay: 0.2237858767;
}
.startails > div:nth-of-type(138) {
--x: 0.7185909214;
--y: 0.6025520785;
--x2: -0.3550435264;
--y2: 0.4307376524;
--delay: 0.9150382436;
}
.startails > div:nth-of-type(139) {
--x: 0.7829846448;
--y: 0.8260534011;
--x2: -0.3553017089;
--y2: 0.1147089504;
--delay: 0.3673237443;
}
.startails > div:nth-of-type(140) {
--x: 0.1285039664;
--y: 0.7044737563;
--x2: 0.4122646438;
--y2: 0.3730910431;
--delay: 0.1119288405;
}
.startails > div:nth-of-type(141) {
--x: 0.1467470382;
--y: 0.7364946556;
--x2: 0.3063667228;
--y2: -0.3740950437;
--delay: 0.419011774;
}
.startails > div:nth-of-type(142) {
--x: 0.6192754299;
--y: 0.8579050218;
--x2: -0.4331353511;
--y2: -0.2911821604;
--delay: 0.9701378179;
}
.startails > div:nth-of-type(143) {
--x: 0.6546930591;
--y: 0.8899282556;
--x2: 0.393626407;
--y2: -0.4113904155;
--delay: 0.8289095342;
}
.startails > div:nth-of-type(144) {
--x: 0.7372801318;
--y: 0.4676231362;
--x2: -0.439262537;
--y2: -0.3509046593;
--delay: 0.4134261908;
}
.startails > div:nth-of-type(145) {
--x: 0.2801884823;
--y: 0.0256254556;
--x2: -0.3529697556;
--y2: -0.3432142683;
--delay: 0.7774873723;
}
.startails > div:nth-of-type(146) {
--x: 0.4102320909;
--y: 0.9595500063;
--x2: 0.4277302557;
--y2: -0.2801797238;
--delay: 0.5410329549;
}
.startails > div:nth-of-type(147) {
--x: 0.8432159416;
--y: 0.1830671575;
--x2: -0.17496566;
--y2: -0.0179084509;
--delay: 0.9556739167;
}
.startails > div:nth-of-type(148) {
--x: 0.8111822336;
--y: 0.8496324856;
--x2: 0.4504496928;
--y2: -0.3625038816;
--delay: 0.913049248;
}
.startails > div:nth-of-type(149) {
--x: 0.4198635143;
--y: 0.7583019206;
--x2: 0.3476422362;
--y2: -0.4431687499;
--delay: 0.4251933967;
}
.startails > div:nth-of-type(150) {
--x: 0.1510474902;
--y: 0.3456479582;
--x2: 0.4069033372;
--y2: 0.2525605489;
--delay: 0.643226212;
}
.startails > div:nth-of-type(151) {
--x: 0.2403719443;
--y: 0.5611327736;
--x2: -0.2166529919;
--y2: 0.439797785;
--delay: 0.373862732;
}
.startails > div:nth-of-type(152) {
--x: 0.5912903769;
--y: 0.5146633748;
--x2: -0.3429685549;
--y2: -0.4018029334;
--delay: 0.9330895989;
}
.startails > div:nth-of-type(153) {
--x: 0.9558709975;
--y: 0.3090371742;
--x2: 0.2802583557;
--y2: -0.4797311362;
--delay: 0.1113424143;
}
.startails > div:nth-of-type(154) {
--x: 0.7787471212;
--y: 0.6043530569;
--x2: 0.2687636415;
--y2: -0.4684769514;
--delay: 0.4894417159;
}
.startails > div:nth-of-type(155) {
--x: 0.48381223;
--y: 0.0462689912;
--x2: 0.0443099715;
--y2: -0.331542412;
--delay: 0.8644022333;
}
.startails > div:nth-of-type(156) {
--x: 0.9961535146;
--y: 0.459060077;
--x2: 0.2190444705;
--y2: 0.3017309907;
--delay: 0.3035092617;
}
.startails > div:nth-of-type(157) {
--x: 0.7676532979;
--y: 0.2162045246;
--x2: 0.2667229434;
--y2: -0.080123592;
--delay: 0.6925711774;
}
.startails > div:nth-of-type(158) {
--x: 0.7296382369;
--y: 0.1154002403;
--x2: -0.2645179503;
--y2: -0.0795653712;
--delay: 0.5184187681;
}
.startails > div:nth-of-type(159) {
--x: 0.5351870138;
--y: 0.1618031076;
--x2: 0.1293674714;
--y2: 0.1993605175;
--delay: 0.2986697398;
}
.startails > div:nth-of-type(160) {
--x: 0.1167749906;
--y: 0.0311438758;
--x2: -0.1182110926;
--y2: 0.1024944766;
--delay: 0.9659999669;
}
.startails > div:nth-of-type(161) {
--x: 0.5399642522;
--y: 0.4541934583;
--x2: -0.2987202639;
--y2: -0.3471123721;
--delay: 0.6003024043;
}
.startails > div:nth-of-type(162) {
--x: 0.899537995;
--y: 0.8728638862;
--x2: 0.1011944566;
--y2: 0.1868741406;
--delay: 0.7784985236;
}
.startails > div:nth-of-type(163) {
--x: 0.7019625802;
--y: 0.8388805891;
--x2: -0.28654488;
--y2: -0.3751868937;
--delay: 0.8589935375;
}
.startails > div:nth-of-type(164) {
--x: 0.2729539351;
--y: 0.7725194688;
--x2: -0.3231593755;
--y2: 0.3712182304;
--delay: 0.393911551;
}
.startails > div:nth-of-type(165) {
--x: 0.4550891949;
--y: 0.4980681126;
--x2: -0.212282269;
--y2: -0.3971735032;
--delay: 0.1784364573;
}
.startails > div:nth-of-type(166) {
--x: 0.7649231875;
--y: 0.5931928081;
--x2: 0.0641160926;
--y2: 0.4111179032;
--delay: 0.1131732937;
}
.startails > div:nth-of-type(167) {
--x: 0.2102214321;
--y: 0.4996395084;
--x2: 0.2023737402;
--y2: 0.3792517396;
--delay: 0.2839899186;
}
.startails > div:nth-of-type(168) {
--x: 0.8634380484;
--y: 0.2963564951;
--x2: -0.1332606323;
--y2: 0.0025157438;
--delay: 0.7642114306;
}
.startails > div:nth-of-type(169) {
--x: 0.9028815756;
--y: 0.8940870142;
--x2: 0.2661252953;
--y2: -0.0955315496;
--delay: 0.6005994354;
}
.startails > div:nth-of-type(170) {
--x: 0.9404707353;
--y: 0.7022960714;
--x2: 0.0713605663;
--y2: 0.3111995376;
--delay: 0.0034174161;
}
.startails > div:nth-of-type(171) {
--x: 0.8723529323;
--y: 0.7929184885;
--x2: 0.0168201411;
--y2: -0.4136024301;
--delay: 0.101533478;
}
.startails > div:nth-of-type(172) {
--x: 0.6682516954;
--y: 0.6813476467;
--x2: 0.1334588115;
--y2: 0.2012784182;
--delay: 0.484417645;
}
.startails > div:nth-of-type(173) {
--x: 0.695997278;
--y: 0.8055639988;
--x2: 0.3032906883;
--y2: 0.4978783116;
--delay: 0.0167445199;
}
.startails > div:nth-of-type(174) {
--x: 0.8676017011;
--y: 0.0278360953;
--x2: 0.4825899763;
--y2: 0.0476687479;
--delay: 0.0823230011;
}
.startails > div:nth-of-type(175) {
--x: 0.0363734098;
--y: 0.6890737068;
--x2: 0.0525517708;
--y2: 0.0427391193;
--delay: 0.3010889639;
}
.startails > div:nth-of-type(176) {
--x: 0.9680552429;
--y: 0.6529645425;
--x2: 0.3270966426;
--y2: 0.3241879523;
--delay: 0.3419489073;
}
.startails > div:nth-of-type(177) {
--x: 0.3434531216;
--y: 0.5142200251;
--x2: 0.2815736664;
--y2: 0.1613942249;
--delay: 0.9351841873;
}
.startails > div:nth-of-type(178) {
--x: 0.1940979269;
--y: 0.4788349634;
--x2: 0.3913399796;
--y2: 0.278749031;
--delay: 0.4672601618;
}
.startails > div:nth-of-type(179) {
--x: 0.3469835222;
--y: 0.2368455554;
--x2: -0.3303265203;
--y2: -0.2378984295;
--delay: 0.9613528989;
}
.startails > div:nth-of-type(180) {
--x: 0.3726998401;
--y: 0.0515596429;
--x2: 0.1535090157;
--y2: -0.0315400522;
--delay: 0.5407610362;
}
.startails > div:nth-of-type(181) {
--x: 0.8317846785;
--y: 0.0079900576;
--x2: -0.3233630676;
--y2: 0.4232024864;
--delay: 0.7944903421;
}
.startails > div:nth-of-type(182) {
--x: 0.9422244847;
--y: 0.1184700494;
--x2: -0.1404048561;
--y2: -0.2206536504;
--delay: 0.4713573918;
}
.startails > div:nth-of-type(183) {
--x: 0.8527221201;
--y: 0.7047885075;
--x2: 0.4136484301;
--y2: 0.4578951191;
--delay: 0.6839660051;
}
.startails > div:nth-of-type(184) {
--x: 0.2121790667;
--y: 0.1382792459;
--x2: -0.3546843305;
--y2: -0.4877408717;
--delay: 0.6648955998;
}
.startails > div:nth-of-type(185) {
--x: 0.4778963987;
--y: 0.5365391076;
--x2: -0.4895246096;
--y2: 0.3947366993;
--delay: 0.9200780448;
}
.startails > div:nth-of-type(186) {
--x: 0.8866009569;
--y: 0.9863655368;
--x2: -0.128909677;
--y2: 0.3392141409;
--delay: 0.7997111401;
}
.startails > div:nth-of-type(187) {
--x: 0.2380340025;
--y: 0.283181839;
--x2: 0.1385304741;
--y2: 0.1450119382;
--delay: 0.605198337;
}
.startails > div:nth-of-type(188) {
--x: 0.0381201499;
--y: 0.1924862137;
--x2: 0.461217142;
--y2: -0.4317963318;
--delay: 0.5096394294;
}
.startails > div:nth-of-type(189) {
--x: 0.2751841283;
--y: 0.5468842959;
--x2: 0.27819348;
--y2: 0.4805520401;
--delay: 0.2627735732;
}
.startails > div:nth-of-type(190) {
--x: 0.3731073984;
--y: 0.0037510832;
--x2: 0.1143325279;
--y2: 0.3293511019;
--delay: 0.4574731868;
}
.startails > div:nth-of-type(191) {
--x: 0.5276247773;
--y: 0.8336125136;
--x2: -0.3178822413;
--y2: -0.4669578133;
--delay: 0.9628847617;
}
.startails > div:nth-of-type(192) {
--x: 0.5387031291;
--y: 0.7955038426;
--x2: -0.4678899895;
--y2: -0.1518300051;
--delay: 0.5601004206;
}
.startails > div:nth-of-type(193) {
--x: 0.0969478425;
--y: 0.1418333589;
--x2: -0.0459369083;
--y2: 0.3809167975;
--delay: 0.4246088234;
}
.startails > div:nth-of-type(194) {
--x: 0.8412105484;
--y: 0.4508377737;
--x2: -0.4753776032;
--y2: -0.2844247511;
--delay: 0.5302718537;
}
.startails > div:nth-of-type(195) {
--x: 0.4048343278;
--y: 0.3830593565;
--x2: 0.4948273874;
--y2: 0.4242202566;
--delay: 0.6142620516;
}
.startails > div:nth-of-type(196) {
--x: 0.619248594;
--y: 0.1360591986;
--x2: 0.4118065039;
--y2: 0.0890090901;
--delay: 0.7350560145;
}
.startails > div:nth-of-type(197) {
--x: 0.1944396004;
--y: 0.6980306681;
--x2: -0.2437379645;
--y2: 0.3843605599;
--delay: 0.3127741757;
}
.startails > div:nth-of-type(198) {
--x: 0.4013485892;
--y: 0.4396518652;
--x2: -0.3307797623;
--y2: -0.1320356103;
--delay: 0.9088243981;
}
.startails > div:nth-of-type(199) {
--x: 0.2246065752;
--y: 0.0230050793;
--x2: -0.0585355397;
--y2: -0.2582950252;
--delay: 0.3298579569;
}
.startails > div:nth-of-type(200) {
--x: 0.7007546192;
--y: 0.5000593771;
--x2: 0.3891280671;
--y2: -0.465851257;
--delay: 0.2136055071;
}
.startails > div:nth-of-type(201) {
--x: 0.9490269518;
--y: 0.9818526114;
--x2: -0.373866777;
--y2: 0.4187278972;
--delay: 0.0680916133;
}
@-webkit-keyframes startails-animation {
from {
opacity: 1;
translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
scale: 0.9;
}
2% {
scale: 0.4;
}
5% {
translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
opacity: 0;
scale: 1;
}
to {
translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
scale: 1;
opacity: 0;
}
}
@keyframes startails-animation {
from {
opacity: 1;
translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
scale: 0.9;
}
2% {
scale: 0.4;
}
5% {
translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
opacity: 0;
scale: 1;
}
to {
translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
scale: 1;
opacity: 0;
}
}
}
@layer scene {
.scene {
display: grid;
place-items: center;
position: absolute;
-webkit-animation: scene-zoom-in-out var(--time) ease-in-out infinite;
animation: scene-zoom-in-out var(--time) ease-in-out infinite;
transform-style: preserve-3d;
}
@-webkit-keyframes scene-zoom-in-out {
from {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
to {
transform: scale(0.9);
}
}
@keyframes scene-zoom-in-out {
from {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
to {
transform: scale(0.9);
}
}
}
@property --space {
syntax: "<length>";
initial-value: 0;
inherits: true;
}
@layer cuboid {
.cuboid {
position: absolute;
transform-style: preserve-3d;
transform: rotateY(312deg) rotateX(350deg) rotateZ(10deg) translateY(20vh);
--size: 8vmax;
--size-h: calc(var(--size) / 2);
--size-h-n: calc(var(--size) / -2);
}
.cuboid .top {
width: var(--size);
aspect-ratio: 1;
background: linear-gradient(135deg, #e8dbdd, #989699);
transform-style: preserve-3d;
transform: rotateX(90deg) translateZ(var(--size-h-n));
opacity: 0.9;
}
.cuboid .front {
width: var(--size);
aspect-ratio: 1/2;
background: linear-gradient(#5f595d, transparent 60%);
opacity: 0.5;
transform: translateZ(var(--size-h));
position: absolute;
}
.cuboid .right {
width: var(--size);
aspect-ratio: 1/2;
background: linear-gradient(#5f595d 10%, transparent 90%);
transform: translate3d(var(--size-h), 0, 0) rotateY(90deg);
position: absolute;
opacity: 0.7;
-webkit-mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
}
.cuboid .outline {
--space: 0vmax;
--space-h: calc(var(--size) / 2);
position: absolute;
width: var(--size);
aspect-ratio: 1;
border: 0.0125vmax solid white;
transition: all 3s ease-in-out;
translate: calc(-50% + var(--space-h)) calc(-50% + var(--space-h));
padding: var(--space);
--duration: 16s;
-webkit-animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
opacity: 0;
box-shadow: inset 0 0 0.5vmax rgba(255, 255, 255, 0.4), 0 0 0.5vmax rgba(255, 255, 255, 0.4);
--initial-space: var(--size-h);
}
.cuboid .outline:nth-of-type(2) {
-webkit-animation-delay: calc(var(--duration) / 4);
animation-delay: calc(var(--duration) / 4);
}
.cuboid .outline:nth-of-type(3) {
-webkit-animation-delay: calc(var(--duration) / 4 * 2);
animation-delay: calc(var(--duration) / 4 * 2);
}
.cuboid .outline:nth-of-type(4) {
-webkit-animation-delay: calc(var(--duration) / 4 * 3);
animation-delay: calc(var(--duration) / 4 * 3);
}
@-webkit-keyframes outline-animation {
from {
--space: var(--initial-space, 0vmax);
opacity: 0;
filter: blur(0vmax);
}
5% {
opacity: 0.2;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.05;
filter: blur(0vmax);
}
80% {
opacity: 0;
}
to {
--space: calc(var(--initial-space, 0vmax) + 25vmax);
opacity: 0;
filter: blur(0.6vmax);
}
}
@keyframes outline-animation {
from {
--space: var(--initial-space, 0vmax);
opacity: 0;
filter: blur(0vmax);
}
5% {
opacity: 0.2;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.05;
filter: blur(0vmax);
}
80% {
opacity: 0;
}
to {
--space: calc(var(--initial-space, 0vmax) + 25vmax);
opacity: 0;
filter: blur(0.6vmax);
}
}
}
@layer planets {
@property --moon-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: true;
}
@-webkit-keyframes moon-animation {
from {
--moon-angle: 180deg;
}
50% {
--moon-angle: 200deg;
}
to {
--moon-angle: 180deg;
}
}
@keyframes moon-animation {
from {
--moon-angle: 180deg;
}
50% {
--moon-angle: 200deg;
}
to {
--moon-angle: 180deg;
}
}
.sun {
border-radius: 50%;
width: 25vmax;
aspect-ratio: 1;
background: radial-gradient(circle at 60% 60%, #f6f6f6, #e8dbdd, #d9d9d9);
position: absolute;
transform: translateY(-20vmax);
box-shadow: 0 0 14vmax rgba(255, 255, 255, 0.5), 0 0 22vmax rgba(255, 255, 255, 0.05), 0 0 42vmax rgba(255, 255, 255, 0.4);
transform-style: preserve-3d;
}
.planet {
border-radius: 50%;
width: 17vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 60% 55%, #252525, #2a2f33 52%, #ede9ea 62%), #ede9ea;
position: absolute;
--r: 15vmax;
--y: calc(-10vmax + sin(var(--moon-angle)) * var(--r));
--z: calc(cos(var(--moon-angle)) * var(--r) * -1);
transform: translateY(var(--y)) translateX(10vmax) translateZ(var(--z));
-webkit-animation: moon-animation var(--time) ease-in-out infinite;
animation: moon-animation var(--time) ease-in-out infinite;
box-shadow: 0 0 2.5vmax rgba(255, 255, 255, 0.12);
filter: blur(0.05vmax);
transform-style: preserve-3d;
}
.planet-2 {
transform-style: preserve-3d;
border-radius: 50%;
width: 13vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 60% 55%, #e3e3e3, #d2c6c8 52%, #212528 62%, transparent 82%);
position: absolute;
--r: 2vmax;
--y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
--z: calc(cos(var(--moon-angle)) * var(--r) * 1);
transform: translateY(var(--y)) translateX(-20vmax) translateZ(var(--z));
-webkit-animation: moon-animation var(--time) ease-in-out infinite;
animation: moon-animation var(--time) ease-in-out infinite;
}
.planet-3 {
transform-style: preserve-3d;
border-radius: 50%;
width: 2vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 70% 50%, #eeeeee 16%, #b7aeb0 38%, #3c4144 52%, #2d3134 60%, transparent 82%);
position: absolute;
transform: translateY(-10vmax) translateX(-20vmax);
opacity: 0.6;
}
.planet-4 {
transform-style: preserve-3d;
border-radius: 50%;
width: 1vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 70% 50%, #d0d0d0, #b7aeb0 38%, #121415 52%, #131617 60%, transparent 82%);
position: absolute;
transform: translateY(-11vmax) translateX(-22vmax);
opacity: 0.5;
}
.planet-5 {
transform-style: preserve-3d;
border-radius: 50%;
width: 10vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 30% 55%, #797777, #515051 52%, #212528 62%, transparent 82%);
position: absolute;
--r: 5vmax;
--y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
--z: calc(cos(var(--moon-angle)) * var(--r) * 1);
transform: translateY(var(--y)) translateX(18vmax) translateZ(var(--z));
-webkit-clip-path: circle();
clip-path: circle();
overflow: clip;
-webkit-animation: moon-animation var(--time) ease-in-out infinite;
animation: moon-animation var(--time) ease-in-out infinite;
--animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;
}
.planet-5 .structure-1 {
position: absolute;
inset: -20vmax;
filter: url(#planet-structure) saturate(0);
mix-blend-mode: lighten;
opacity: 0.4;
transform: scale(4) translateX(1vmax);
-webkit-animation: var(--animation);
animation: var(--animation);
}
.planet-5 .structure-2 {
position: absolute;
inset: -20vmax;
filter: url(#planet-structure) saturate(0);
mix-blend-mode: lighten;
opacity: 0.5;
transform: scale(7.5);
-webkit-animation: var(--animation);
animation: var(--animation);
}
.planet-5 .structure-3 {
position: absolute;
inset: -20vmax;
filter: url(#planet-structure) saturate(0);
mix-blend-mode: lighten;
opacity: 0.1;
transform: scale(0.2) translateX(1vmax);
-webkit-animation: var(--animation);
animation: var(--animation);
}
.planet-5::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 5% 20%, transparent 30%, #171a1c 60%);
}
@-webkit-keyframes move-to-left {
from {
translate: 0 0;
}
50% {
translate: -100% 0;
}
to {
translate: 0 0;
}
}
@keyframes move-to-left {
from {
translate: 0 0;
}
50% {
translate: -100% 0;
}
to {
translate: 0 0;
}
}
.planet-6 {
transform-style: preserve-3d;
border-radius: 50%;
width: 7vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 30% 55%, #f3ecec, #7a7a7a 52%, #212528 72%, transparent);
position: absolute;
--r: 6vmax;
--y: calc(-39.6vmax + sin(var(--moon-angle)) * var(--r));
--z: calc(cos(var(--moon-angle)) * var(--r) * 1);
transform: translateY(var(--y)) translateX(23vmax) translateZ(var(--z));
-webkit-animation: moon-animation var(--time) ease-in-out infinite;
animation: moon-animation var(--time) ease-in-out infinite;
display: grid;
place-items: center;
}
.planet-6::before {
content: "";
position: absolute;
border-radius: 50%;
width: 12vmax;
height: 1vmax;
border: 1vmax solid #5e5e5e;
box-shadow: inset 0 0 1rem black;
transform: rotate(25deg);
-webkit-mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
-webkit-clip-path: ellipse(47% 22% at 50% 50%);
clip-path: ellipse(47% 22% at 50% 50%);
filter: blur(0.5vmax);
}
.planet-6::after {
content: "";
position: absolute;
border-radius: 50%;
width: 12vmax;
height: 1vmax;
border: 2.6vmax solid #43484c;
box-shadow: inset 0 0 1rem black;
transform: rotate(25deg);
-webkit-mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
-webkit-clip-path: ellipse(47% 22% at 50% 50%);
clip-path: ellipse(47% 22% at 50% 50%);
}
.planets,
.planets-2 {
position: absolute;
inset: 0;
}
.planets > div,
.planets-2 > div {
--distance: 20vmax;
border-radius: 50%;
width: 1.6vmax;
aspect-ratio: 1;
background: radial-gradient(90% 90% at 70% 50%, #bbbaba, #888586 38%, #121415 52%, #131617 60%, transparent 82%);
opacity: 0.5;
filter: blur(0.1rem);
translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
}
.planets > div:nth-of-type(1),
.planets-2 > div:nth-of-type(1) {
--x: 0.7279451305;
--y: 0.9754793709;
--x2: -0.3239696701;
--y2: -0.3080862884;
--delay: 0.6969778158;
}
.planets > div:nth-of-type(2),
.planets-2 > div:nth-of-type(2) {
--x: 0.1193714588;
--y: 0.8454518931;
--x2: -0.0267197193;
--y2: 0.0023904004;
--delay: 0.8684147782;
}
.planets > div:nth-of-type(3),
.planets-2 > div:nth-of-type(3) {
--x: 0.5229847175;
--y: 0.0652216469;
--x2: 0.4325484614;
--y2: -0.2194515793;
--delay: 0.9611514059;
}
.planets > div:nth-of-type(4),
.planets-2 > div:nth-of-type(4) {
--x: 0.2008314257;
--y: 0.5765086699;
--x2: -0.1766107147;
--y2: -0.0316007479;
--delay: 0.3507357225;
}
.planets > div:nth-of-type(5),
.planets-2 > div:nth-of-type(5) {
--x: 0.8620777592;
--y: 0.8777307485;
--x2: 0.0886903604;
--y2: 0.3619296153;
--delay: 0.9562441999;
}
.planets > div:nth-of-type(6),
.planets-2 > div:nth-of-type(6) {
--x: 0.1152245774;
--y: 0.6804922988;
--x2: 0.4987950683;
--y2: 0.1061922063;
--delay: 0.3589499292;
}
.planets > div:nth-of-type(7),
.planets-2 > div:nth-of-type(7) {
--x: 0.6690119027;
--y: 0.5580677139;
--x2: -0.3003054752;
--y2: 0.0689321963;
--delay: 0.6845605436;
}
.planets > div:nth-of-type(8),
.planets-2 > div:nth-of-type(8) {
--x: 0.704511988;
--y: 0.429237468;
--x2: -0.1135934911;
--y2: 0.3004370648;
--delay: 0.7457741578;
}
.planets > div:nth-of-type(9),
.planets-2 > div:nth-of-type(9) {
--x: 0.8582965381;
--y: 0.8413396824;
--x2: 0.4508067368;
--y2: -0.4017603113;
--delay: 0.8031776137;
}
.planets > div:nth-of-type(10),
.planets-2 > div:nth-of-type(10) {
--x: 0.9570164163;
--y: 0.6473197647;
--x2: 0.0888862347;
--y2: 0.0149863589;
--delay: 0.4296621647;
}
.planets > div:nth-of-type(11),
.planets-2 > div:nth-of-type(11) {
--x: 0.4172537575;
--y: 0.2633344951;
--x2: -0.0162210081;
--y2: -0.1113230757;
--delay: 0.6636097067;
}
.planets > div:nth-of-type(12),
.planets-2 > div:nth-of-type(12) {
--x: 0.2453048834;
--y: 0.038347953;
--x2: -0.1336806515;
--y2: -0.2845792308;
--delay: 0.090373217;
}
.planets > div:nth-of-type(13),
.planets-2 > div:nth-of-type(13) {
--x: 0.1698751711;
--y: 0.1975811209;
--x2: -0.3627152169;
--y2: -0.1923797878;
--delay: 0.4096463943;
}
.planets > div:nth-of-type(14),
.planets-2 > div:nth-of-type(14) {
--x: 0.6485599131;
--y: 0.5829101492;
--x2: -0.109354217;
--y2: -0.2205297096;
--delay: 0.7883648772;
}
.planets > div:nth-of-type(15),
.planets-2 > div:nth-of-type(15) {
--x: 0.0970739154;
--y: 0.7352229977;
--x2: -0.2078420007;
--y2: -0.4147519007;
--delay: 0.5952446198;
}
.planets > div:nth-of-type(16),
.planets-2 > div:nth-of-type(16) {
--x: 0.6000537488;
--y: 0.0364372369;
--x2: -0.4465265733;
--y2: -0.4650175515;
--delay: 0.9918448891;
}
.planets > div:nth-of-type(17),
.planets-2 > div:nth-of-type(17) {
--x: 0.4679484342;
--y: 0.6671047691;
--x2: 0.4857883609;
--y2: 0.2401230242;
--delay: 0.0740994606;
}
.planets > div:nth-of-type(18),
.planets-2 > div:nth-of-type(18) {
--x: 0.9001809505;
--y: 0.3107910818;
--x2: -0.0021379187;
--y2: 0.4840349904;
--delay: 0.3259017281;
}
.planets > div:nth-of-type(19),
.planets-2 > div:nth-of-type(19) {
--x: 0.1256850004;
--y: 0.495532467;
--x2: 0.1711239765;
--y2: 0.0638829792;
--delay: 0.0967109368;
}
.planets > div:nth-of-type(20),
.planets-2 > div:nth-of-type(20) {
--x: 0.6063274882;
--y: 0.7892011368;
--x2: 0.1439316226;
--y2: -0.1690133538;
--delay: 0.6644676153;
}
.planets > div:nth-of-type(21),
.planets-2 > div:nth-of-type(21) {
--x: 0.7256308249;
--y: 0.876989042;
--x2: -0.1898193256;
--y2: 0.2171791906;
--delay: 0.1865809966;
}
.planets > div:nth-of-type(22),
.planets-2 > div:nth-of-type(22) {
--x: 0.8682781048;
--y: 0.4347833921;
--x2: -0.081477302;
--y2: -0.1763619973;
--delay: 0.0348615875;
}
.planets > div:nth-of-type(23),
.planets-2 > div:nth-of-type(23) {
--x: 0.5027550286;
--y: 0.5618068319;
--x2: 0.0716751354;
--y2: 0.0509870725;
--delay: 0.6993721334;
}
.planets > div:nth-of-type(24),
.planets-2 > div:nth-of-type(24) {
--x: 0.1093756203;
--y: 0.2163317781;
--x2: 0.494801144;
--y2: 0.0509057365;
--delay: 0.3111645263;
}
.planets > div:nth-of-type(25),
.planets-2 > div:nth-of-type(25) {
--x: 0.5926894944;
--y: 0.7840291866;
--x2: -0.0836250532;
--y2: 0.1031642222;
--delay: 0.7011715488;
}
.planets > div:nth-of-type(26),
.planets-2 > div:nth-of-type(26) {
--x: 0.0459298727;
--y: 0.2852682177;
--x2: -0.1334955548;
--y2: -0.1251631625;
--delay: 0.8398721019;
}
.planets > div:nth-of-type(27),
.planets-2 > div:nth-of-type(27) {
--x: 0.0720010417;
--y: 0.772507658;
--x2: 0.415026455;
--y2: 0.3164745564;
--delay: 0.2251415265;
}
.planets > div:nth-of-type(28),
.planets-2 > div:nth-of-type(28) {
--x: 0.7338275135;
--y: 0.9245528948;
--x2: 0.1351063204;
--y2: 0.0979805995;
--delay: 0.4374559319;
}
.planets > div:nth-of-type(29),
.planets-2 > div:nth-of-type(29) {
--x: 0.2777112077;
--y: 0.5650451889;
--x2: 0.2579671246;
--y2: 0.3445964505;
--delay: 0.9299137537;
}
.planets > div:nth-of-type(30),
.planets-2 > div:nth-of-type(30) {
--x: 0.3310594646;
--y: 0.1230249216;
--x2: -0.0248420005;
--y2: -0.1948884536;
--delay: 0.2716244991;
}
.planets > div:nth-of-type(31),
.planets-2 > div:nth-of-type(31) {
--x: 0.2491266937;
--y: 0.7579035757;
--x2: 0.341257592;
--y2: -0.2492209275;
--delay: 0.5557119964;
}
.planets > div:nth-of-type(32),
.planets-2 > div:nth-of-type(32) {
--x: 0.4317509795;
--y: 0.9098766521;
--x2: -0.4666925003;
--y2: -0.1234557032;
--delay: 0.1255770068;
}
.planets > div:nth-of-type(33),
.planets-2 > div:nth-of-type(33) {
--x: 0.6940499318;
--y: 0.084500363;
--x2: 0.450344484;
--y2: 0.2924303022;
--delay: 0.7559270822;
}
.planets > div:nth-of-type(34),
.planets-2 > div:nth-of-type(34) {
--x: 0.1759089592;
--y: 0.1525549675;
--x2: -0.4240804792;
--y2: -0.0167233572;
--delay: 0.8331216264;
}
.planets > div:nth-of-type(35),
.planets-2 > div:nth-of-type(35) {
--x: 0.1758701377;
--y: 0.1597456799;
--x2: -0.3942916249;
--y2: -0.2427607243;
--delay: 0.3181870038;
}
.planets > div:nth-of-type(36),
.planets-2 > div:nth-of-type(36) {
--x: 0.455626465;
--y: 0.3489680389;
--x2: 0.2394645888;
--y2: -0.219871564;
--delay: 0.75083485;
}
.planets > div:nth-of-type(37),
.planets-2 > div:nth-of-type(37) {
--x: 0.1578901679;
--y: 0.2743526099;
--x2: -0.0413205497;
--y2: -0.4357052878;
--delay: 0.2450395057;
}
.planets > div:nth-of-type(38),
.planets-2 > div:nth-of-type(38) {
--x: 0.7105108507;
--y: 0.8094873819;
--x2: 0.2287506761;
--y2: 0.0431921476;
--delay: 0.5855828097;
}
.planets > div:nth-of-type(39),
.planets-2 > div:nth-of-type(39) {
--x: 0.7719596356;
--y: 0.1966234179;
--x2: -0.1668968636;
--y2: 0.1737426275;
--delay: 0.4862477208;
}
.planets > div:nth-of-type(40),
.planets-2 > div:nth-of-type(40) {
--x: 0.9163926703;
--y: 0.6195499243;
--x2: 0.0057840298;
--y2: -0.4705285912;
--delay: 0.6820875595;
}
.planets > div:nth-of-type(41),
.planets-2 > div:nth-of-type(41) {
--x: 0.3419043288;
--y: 0.2667563213;
--x2: 0.4899282375;
--y2: -0.2628264997;
--delay: 0.0289526911;
}
.planets > div:nth-of-type(42),
.planets-2 > div:nth-of-type(42) {
--x: 0.8910324744;
--y: 0.6841646223;
--x2: -0.0959332975;
--y2: -0.188996967;
--delay: 0.8024861689;
}
.planets > div:nth-of-type(43),
.planets-2 > div:nth-of-type(43) {
--x: 0.0549879184;
--y: 0.7426184323;
--x2: 0.3736112638;
--y2: -0.3930436993;
--delay: 0.9759022282;
}
.planets > div:nth-of-type(44),
.planets-2 > div:nth-of-type(44) {
--x: 0.5289573393;
--y: 0.7012820595;
--x2: 0.0064305911;
--y2: 0.1987122898;
--delay: 0.5623844548;
}
.planets > div:nth-of-type(45),
.planets-2 > div:nth-of-type(45) {
--x: 0.6133909265;
--y: 0.1308224343;
--x2: 0.2907056166;
--y2: 0.0823250404;
--delay: 0.0218820995;
}
.planets > div:nth-of-type(46),
.planets-2 > div:nth-of-type(46) {
--x: 0.9095698134;
--y: 0.8421941855;
--x2: -0.2266420747;
--y2: 0.4258832333;
--delay: 0.022023997;
}
.planets > div:nth-of-type(47),
.planets-2 > div:nth-of-type(47) {
--x: 0.0138861029;
--y: 0.0830693154;
--x2: -0.234649857;
--y2: -0.3356009141;
--delay: 0.1360937707;
}
.planets > div:nth-of-type(48),
.planets-2 > div:nth-of-type(48) {
--x: 0.1647713892;
--y: 0.8574266975;
--x2: -0.0185118267;
--y2: -0.1937055668;
--delay: 0.0513335727;
}
.planets > div:nth-of-type(49),
.planets-2 > div:nth-of-type(49) {
--x: 0.5729239037;
--y: 0.3937504227;
--x2: -0.0574807491;
--y2: -0.035562469;
--delay: 0.891495453;
}
.planets > div:nth-of-type(50),
.planets-2 > div:nth-of-type(50) {
--x: 0.7327436144;
--y: 0.7309301974;
--x2: -0.1744988766;
--y2: 0.1014382177;
--delay: 0.2486225315;
}
.planets > div:nth-of-type(51),
.planets-2 > div:nth-of-type(51) {
--x: 0.9122040863;
--y: 0.433287771;
--x2: -0.0422699515;
--y2: 0.2948061008;
--delay: 0.7151558442;
}
.planets-2 > div {
width: 0.5vmax;
opacity: 0.6;
filter: unset;
}
}
@layer object {
.object {
position: absolute;
display: grid;
display: none;
place-items: center;
transform: rotateY(45deg) translateZ(6vmax);
translate: 5vmax 5vmax;
}
.object .body {
position: absolute;
display: grid;
place-items: center;
--content: "🏄♂️";
--content: "🐋";
font-size: 6vmax;
color: initial;
z-index: 1111;
}
.object .body:before {
content: var(--content);
transform: scaleX(-1);
filter: saturate(0) brightness(1.1) drop-shadow(0 0 1vmax rgba(0, 0, 0, 0.4));
z-index: 1111;
}
.object .body:after {
content: var(--content);
transform: scaleX(-1) scaleY(-1) translateY(2.5vmax);
filter: saturate(0) brightness(0);
-webkit-mask: linear-gradient(to bottom, transparent 60%, black 80%);
mask: linear-gradient(to bottom, transparent 60%, black 80%);
z-index: 115;
}
}
@layer human {
.human {
position: absolute;
display: grid;
place-items: center;
width: 6vmax;
height: 14vmax;
translate: 0 17vh;
z-index: 111;
}
.human:not(.shadow) {
filter: invert(0.04) drop-shadow(0 0 1.5vmax rgba(250, 250, 250, 0.6));
}
.human > div {
position: absolute;
}
.human .head {
background: white;
width: 1.5vmax;
height: 1.6vmax;
border-radius: 50%;
translate: 0.2vmax -6.2vmax;
rotate: 355deg;
}
.human .head:before {
content: "";
position: absolute;
background: white;
width: 0.27vmax;
height: 0.7vmax;
border-radius: 50%;
translate: 1.19vmax 0.5vmin;
rotate: 136deg;
-webkit-animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
}
@-webkit-keyframes head-nose {
from {
translate: 1.19vmax 0.5vmin;
}
50% {
translate: 1.06vmax 0.5vmin;
}
to {
translate: 1.19vmax 0.5vmin;
}
}
@keyframes head-nose {
from {
translate: 1.19vmax 0.5vmin;
}
50% {
translate: 1.06vmax 0.5vmin;
}
to {
translate: 1.19vmax 0.5vmin;
}
}
.human .head:after {
content: "";
position: absolute;
background: white;
width: 1.1vmax;
height: 0.9vmax;
border-radius: 50%;
translate: 0.45vmax 0.66vmax;
rotate: 45deg;
-webkit-animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
}
@-webkit-keyframes head-chin {
from {
translate: 0.45vmax 0.66vmax;
}
50% {
translate: 0.2vmax 0.66vmax;
}
to {
translate: 0.45vmax 0.66vmax;
}
}
@keyframes head-chin {
from {
translate: 0.45vmax 0.66vmax;
}
50% {
translate: 0.2vmax 0.66vmax;
}
to {
translate: 0.45vmax 0.66vmax;
}
}
.human .neck {
background: white;
width: 0.8vmax;
height: 1.5vmax;
border-radius: 50%;
translate: 0.2vmax -5.4vmax;
}
.human .neck:before {
content: "";
position: absolute;
width: 0.3vmax;
height: 1.5vmax;
background: white;
border-radius: 50%;
translate: 0.6vmax 0.4vmax;
rotate: 352deg;
}
.human .body {
z-index: 11;
}
.human .body > div {
position: absolute;
}
.human .body .shoulder:before {
content: "";
position: absolute;
width: 1.3vmax;
height: 0.5vmax;
background: white;
border-radius: 50%;
translate: -1.1vmax -5vmax;
rotate: 330deg;
}
.human .body .shoulder:after {
content: "";
position: absolute;
width: 1.3vmax;
height: 0.5vmax;
background: white;
border-radius: 50%;
translate: 0.4vmax -4.9vmax;
rotate: 24deg;
}
.human .body .back {
width: 1.3vmax;
height: 4.1vmax;
background: #fafafa;
border-radius: 20%;
translate: -0.2vmax -4.9vmax;
rotate: 357deg;
}
.human .body .back:before {
content: "";
position: absolute;
width: 2.9vmax;
height: 1.5vmax;
background: #fafafa;
border-radius: 50%;
translate: -1.4vmax 0.7vmax;
rotate: 69deg;
z-index: -1;
}
.human .body .back:after {
content: "";
position: absolute;
width: 2.6vmax;
height: 1vmax;
background: #fafafa;
border-radius: 50%;
translate: 0.1vmax 1.1vmax;
rotate: 96deg;
}
.human .body .hip .center {
position: absolute;
width: 1.6vmax;
height: 1.8vmax;
background: radial-gradient(white, #f5f5f5);
border-radius: 39.6%;
translate: -0.3vmax -3vmax;
rotate: 267deg;
display: grid;
}
.human .body .hip:before {
content: "";
position: absolute;
width: 1.6vmax;
height: 2.2vmax;
background: radial-gradient(white, #e7e4e4);
border-radius: 46.5%;
translate: -0.6vmax -2.5vmax;
rotate: 8deg;
}
.human .body .hip:after {
content: "";
position: absolute;
width: 1.3vmax;
height: 2.2vmax;
background: radial-gradient(white, #f6f5f5);
border-radius: 41.1%;
translate: 0.3vmax -2.2vmax;
rotate: 161deg;
}
.human .leg.right {
width: 1.1vmax;
height: 2.9vmax;
background: white;
border-radius: 50%;
translate: 1.2vmax 0.4vmax;
rotate: 348deg;
}
.human .leg.right:after {
content: "";
position: absolute;
width: 0.7vmax;
height: 2.9vmax;
background: white;
border-radius: 50%;
translate: 0.5vmax 0.2vmax;
rotate: 13deg;
}
.human .leg.right .knee {
position: absolute;
height: 1.7vmax;
width: 0.75vmax;
background: white;
border-radius: 39.6%;
translate: 0vmax 2.2vmax;
rotate: 15deg;
}
.human .leg.right .lower {
position: absolute;
height: 3.2vmax;
width: 0.8vmax;
background: white;
border-radius: 50%;
translate: -0.3vmax 2.4vmax;
rotate: 15deg;
}
.human .leg.right .lower:before {
content: "";
position: absolute;
width: 0.5vmax;
height: 1.5vmax;
background: white;
border-radius: 67.8%;
translate: 0.5vmax 2.6vmax;
rotate: 66deg;
}
.human .leg.right .lower:after {
content: "";
position: absolute;
width: 0.5vmax;
height: 1.5vmax;
background: white;
border-radius: 27.8%;
translate: 0.1vmax 2.3vmax;
rotate: 0deg;
}
.human .leg.left {
width: 1.1vmax;
height: 2.9vmax;
background: #f4efef;
border-radius: 50%;
translate: -0.3vmax 0.4vmax;
rotate: 2deg;
filter: invert(0.04);
z-index: -1;
}
.human .leg.left:after {
content: "";
position: absolute;
width: 0.7vmax;
height: 2.9vmax;
background: #f4efef;
border-radius: 50%;
translate: 0.5vmax 0.2vmax;
rotate: 13deg;
}
.human .leg.left .knee {
position: absolute;
height: 1.7vmax;
width: 0.75vmax;
background: #e7e4e4;
border-radius: 39.6%;
translate: 0vmax 2.2vmax;
rotate: 5deg;
}
.human .leg.left .lower {
position: absolute;
height: 3.2vmax;
width: 0.8vmax;
background: #eae6e6;
border-radius: 50%;
translate: -0.1vmax 1.9vmax;
rotate: 5deg;
}
.human .leg.left .lower:before {
content: "";
position: absolute;
width: 0.5vmax;
height: 1.5vmax;
background: #e7e4e4;
border-radius: 67.8%;
translate: 0.5vmax 2.6vmax;
rotate: 47deg;
}
.human .leg.left .lower:after {
content: "";
position: absolute;
width: 0.5vmax;
height: 1.55vmax;
background: #e7e4e4;
border-radius: 27.8%;
translate: 0.1vmax 2.3vmax;
rotate: 0deg;
}
.human .arm.right {
position: absolute;
width: 0.7vmax;
height: 2.9vmax;
background: white;
border-radius: 27.8%;
translate: 1.6vmax -3.1vmax;
rotate: 346deg;
-webkit-animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
}
@-webkit-keyframes arm-right {
from {
rotate: 346deg;
}
50% {
rotate: 350deg;
}
to {
rotate: 346deg;
}
}
@keyframes arm-right {
from {
rotate: 346deg;
}
50% {
rotate: 350deg;
}
to {
rotate: 346deg;
}
}
.human .arm.right:before {
content: "";
position: absolute;
width: 0.3vmax;
height: 2.45vmax;
background: white;
border-radius: 27.8%;
translate: 0.3vmax 2.1vmax;
rotate: 6deg;
}
.human .arm.right:after {
content: "";
position: absolute;
width: 0.4vmax;
height: 2.15vmax;
background: white;
border-radius: 27.8%;
translate: 0.1vmax 2.1vmax;
rotate: 351deg;
}
.human .arm.right .hand {
position: absolute;
width: 0.3vmax;
height: 0.85vmax;
background: white;
border-radius: 27.8%;
translate: 0.3vmax 3.7vmax;
rotate: 353deg;
}
.human .arm.right .hand:after {
content: "";
position: absolute;
width: 0.5vmax;
height: 0.55vmax;
background: white;
border-radius: 39.2%;
translate: -0.2vmax 0.6vmax;
rotate: 65deg;
}
.human .arm.left {
width: 0.7vmax;
height: 2.5vmax;
background: white;
border-radius: 59.8%;
translate: -0.9vmax -3.4vmax;
rotate: 359deg;
filter: invert(0.1);
z-index: -2;
-webkit-animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
}
@-webkit-keyframes arm-left {
from {
rotate: 359deg;
}
50% {
rotate: 364deg;
}
to {
rotate: 359deg;
}
}
@keyframes arm-left {
from {
rotate: 359deg;
}
50% {
rotate: 364deg;
}
to {
rotate: 359deg;
}
}
.human .arm.left:before {
content: "";
position: absolute;
width: 0.3vmax;
height: 2.45vmax;
background: white;
border-radius: 27.8%;
translate: 0.3vmax 1.8vmax;
rotate: 6deg;
}
.human .arm.left:after {
content: "";
position: absolute;
width: 0.4vmax;
height: 2.15vmax;
background: white;
border-radius: 27.8%;
translate: 0.2vmax 2.1vmax;
rotate: 351deg;
}
.human .arm.left .hand {
position: absolute;
width: 0.3vmax;
height: 0.85vmax;
background: white;
border-radius: 27.8%;
translate: 0.3vmax 3.7vmax;
rotate: 353deg;
}
.human .arm.left .hand:after {
content: "";
position: absolute;
width: 0.5vmax;
height: 0.55vmax;
background: white;
border-radius: 39.2%;
translate: -0.1vmax 0.2vmax;
rotate: 65deg;
}
.human.shadow {
transform: scaleY(-1) translateY(-9vmax);
filter: invert(0.2);
opacity: 0.5;
z-index: 0;
-webkit-mask: linear-gradient(to top, black 25%, transparent 35%);
mask: linear-gradient(to top, black 25%, transparent 35%);
}
.human.shadow .leg.left .lower:before {
rotate: 102deg;
}
.human.shadow .leg.right .lower:before {
rotate: 102deg;
}
}
.highlight {
position: absolute;
height: 100vh;
width: 100vw;
background: radial-gradient(50vmin 70vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent), radial-gradient(40vmin 30vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent), radial-gradient(40vmin 60vmin at 10% 70%, rgba(255, 255, 255, 0.14), transparent), radial-gradient(80vmin 100vh at 30% 70%, rgba(255, 255, 255, 0.1), transparent);
filter: blur(5vmin);
pointer-events: none;
}
.color-filter {
position: absolute;
height: 100vh;
width: 100vw;
background: conic-gradient(at 50% 60%, rgba(50, 56, 92, 0.27), rgba(152, 75, 132, 0.07), rgba(150, 75, 152, 0.04), rgba(50, 56, 92, 0.27));
mix-blend-mode: color;
pointer-events: none;
}
.audio-icon-button {
border: 0.0625rem white solid;
padding: 0.5rem;
width: 2.265rem;
height: 2.265rem;
border-radius: 50%;
background: transparent;
position: fixed;
right: 2rem;
top: 2rem;
z-index: 4200;
aspect-ratio: 1;
display: flex;
gap: 0.125rem;
align-items: center;
justify-content: center;
opacity: 0.5;
transition: opacity 0.3s ease;
}
@media (hover) {
.audio-icon-button {
cursor: pointer;
}
.audio-icon-button:hover {
opacity: 1;
}
}
.audio-icon-button .bar {
background: white;
height: 1.5rem;
width: 0.0825rem;
}
.audio-icon-button .bar:nth-of-type(1), .audio-icon-button .bar:nth-of-type(5) {
height: 0.5rem;
}
.audio-icon-button .bar:nth-of-type(2), .audio-icon-button .bar:nth-of-type(4) {
height: 1rem;
}
@layer global {
body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
background-color: var(--color-surface);
color: var(--color-primary);
position: absolute;
inset: 0;
perspective: 80vmax;
margin: 0;
overflow: hidden;
}
body:before {
content: "";
position: absolute;
inset: 0;
z-index: 111;
pointer-events: none;
background: rgba(0, 0, 0, 0.1);
-webkit-mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
-webkit-backdrop-filter: blur(5vmin) invert(0);
backdrop-filter: blur(5vmin) invert(0);
}
* {
box-sizing: border-box;
}
}
a.labs-follow-me {
left: 2rem;
right: 2rem;
bottom: 1rem;
top: unset;
text-align: center;
}
Explanation Of CSS Code
- The
.starsclass gives the twinkling effect to the stars, using a simple animation. The@keyframesrule moves the background image to simulate a slow, drifting star field. - This eclipse effect is created by blending two radial gradients, simulating light and shadow, along with a subtle rotation animation.
- The human figure is created with simple gradients and shadow effects to give a glowing presence, reinforcing the ethereal feel of the scene.
- The floating animation makes the character appear as though they’re subtly moving, giving the whole scene a serene, dream-like quality.
Final Result Of Cosmic Dreams Animation
After putting everything together, the ‘Cosmic Dreams’ scene creates an immersive cosmic environment with drifting stars, a glowing planetary eclipse, and an illuminated human figure standing in awe of the celestial event.
This project shows how powerful simple HTML and CSS can be when combined with creativity. The visual elements, animations, and layering effects help create a rich, otherworldly atmosphere, perfect for backgrounds, landing pages, or creative projects.
Conclusion:
The ‘Cosmic Dreams’ project is a perfect example of how CSS animations and effects can elevate a simple concept into something visually striking. With the combination of a starry sky, planetary bodies, and a human figure, this scene delivers a sense of awe and wonder.
Feel free to download the code and experiment with adding your own celestial elements, and remember to add your unique twists to make it even more personalized!
