Skip to content

Submits animation files #3337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mister2fresh wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Submits animation files #3337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ab6e2a
Submits animation files
mister2fresh Jan 10, 2026
3a493b4
Remove extra indentation from CSS
mister2fresh Jan 10, 2026
4b8d937
Corrects stylesheet name and href
mister2fresh Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions Art/mister2fresh-eventhorizon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Event Horizon</title>
</head>
<body>
<div class="title">Event Horizon</div>
<div class="container">
<div class="glow"></div>
<div class="accretion-disk"></div>
<div class="ring ring1"></div>
<div class="ring ring2"></div>
<div class="ring ring3"></div>
<div class="particle particle1"></div>
<div class="particle particle2"></div>
<div class="particle particle3"></div>
<div class="particle particle4"></div>
<div class="particle particle5"></div>
<div class="particle particle6"></div>
<div class="black-hole"></div>
</div>
</body>
</html>
5 changes: 5 additions & 0 deletions Art/mister2fresh-eventhorizon/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

{
"artName": "Event Horizon",
"githubHandle": "mister2fresh"
}
263 changes: 263 additions & 0 deletions Art/mister2fresh-eventhorizon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #000;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
position: relative;
width: 600px;
height: 600px;
}

.black-hole {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, #000 0%, #111 70%, #222 100%);
border-radius: 50%;
box-shadow:
0 0 50px 20px rgba(0, 0, 0, 0.8),
inset 0 0 30px rgba(0, 0, 0, 1);
z-index: 10;
}

.accretion-disk {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent,
rgba(255, 100, 0, 0.3),
rgba(255, 150, 50, 0.5),
rgba(255, 200, 100, 0.4),
transparent
);
animation: rotate 8s linear infinite;
}

.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2px solid;
animation: pulse-ring 3s ease-in-out infinite;
}

.ring1 {
width: 200px;
height: 200px;
border-color: rgba(255, 150, 50, 0.6);
animation-delay: 0s;
}

.ring2 {
width: 300px;
height: 300px;
border-color: rgba(255, 120, 30, 0.5);
animation-delay: 1s;
}

.ring3 {
width: 400px;
height: 400px;
border-color: rgba(255, 100, 20, 0.4);
animation-delay: 2s;
}

.particle {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.particle1 {
top: 20%;
left: 80%;
animation: spiral1 6s linear infinite;
}

.particle2 {
top: 60%;
left: 10%;
animation: spiral2 7s linear infinite;
}

.particle3 {
top: 40%;
left: 90%;
animation: spiral3 5s linear infinite;
}

.particle4 {
top: 80%;
left: 50%;
animation: spiral4 8s linear infinite;
}

.particle5 {
top: 10%;
left: 30%;
animation: spiral5 6.5s linear infinite;
}

.particle6 {
top: 70%;
left: 70%;
animation: spiral6 7.5s linear infinite;
}

.glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(255, 150, 50, 0.3), transparent 70%);
border-radius: 50%;
animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

@keyframes pulse-ring {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.3;
}
}

@keyframes glow-pulse {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}

@keyframes spiral1 {
0% {
transform: rotate(0deg) translateX(250px) rotate(0deg);
opacity: 1;
}
100% {
transform: rotate(360deg) translateX(0px) rotate(-360deg);
opacity: 0;
}
}

@keyframes spiral2 {
0% {
transform: rotate(60deg) translateX(280px) rotate(-60deg);
opacity: 1;
}
100% {
transform: rotate(420deg) translateX(0px) rotate(-420deg);
opacity: 0;
}
}

@keyframes spiral3 {
0% {
transform: rotate(120deg) translateX(260px) rotate(-120deg);
opacity: 1;
}
100% {
transform: rotate(480deg) translateX(0px) rotate(-480deg);
opacity: 0;
}
}

@keyframes spiral4 {
0% {
transform: rotate(180deg) translateX(290px) rotate(-180deg);
opacity: 1;
}
100% {
transform: rotate(540deg) translateX(0px) rotate(-540deg);
opacity: 0;
}
}

@keyframes spiral5 {
0% {
transform: rotate(240deg) translateX(270px) rotate(-240deg);
opacity: 1;
}
100% {
transform: rotate(600deg) translateX(0px) rotate(-600deg);
opacity: 0;
}
}

@keyframes spiral6 {
0% {
transform: rotate(300deg) translateX(265px) rotate(-300deg);
opacity: 1;
}
100% {
transform: rotate(660deg) translateX(0px) rotate(-660deg);
opacity: 0;
}
}

.title {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 150, 50, 0.8);
font-family: 'Courier New', monospace;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
animation: flicker 3s ease-in-out infinite;
text-shadow: 0 0 10px rgba(255, 150, 50, 0.5);
}

@keyframes flicker {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}