<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<title>Simple Figure with Tricolor Glow and Disappear Animation</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
body {
margin: 0;
background: radial-gradient(circle at center, #000000, #050505 80%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Share Tech Mono', monospace;
color: #0f0;
user-select: none;
overflow: hidden;
}
.container {
position: relative;
font-size: 48px;
line-height: 1;
white-space: nowrap;
display: inline-block;
perspective: 800px;
text-align: center;
filter: drop-shadow(0 0 4px #0f0);
animation: tricolorGlow 3s infinite alternate;
}
@keyframes tricolorGlow {
0% {
filter:
drop-shadow(0 0 6px red)
drop-shadow(0 0 10px red)
drop-shadow(0 0 20px red);
color: red;
}
33% {
filter:
drop-shadow(0 0 6px lime)
drop-shadow(0 0 10px lime)
drop-shadow(0 0 20px lime);
color: lime;
}
66% {
filter:
drop-shadow(0 0 6px cyan)
drop-shadow(0 0 10px cyan)
drop-shadow(0 0 20px cyan);
color: cyan;
}
100% {
filter:
drop-shadow(0 0 6px red)
drop-shadow(0 0 10px red)
drop-shadow(0 0 20px red);
color: red;
}
}
.piece {
display: inline-block;
position: relative;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-name: disappearFly;
animation-duration: 4s;
animation-delay: calc(var(--i) * 0.15s);
opacity: 1;
text-shadow:
0 0 6px currentColor,
0 0 12px currentColor,
0 0 24px currentColor;
transform-origin: center center;
user-select: none;
}
@keyframes disappearFly {
0% {
opacity: 1;
transform: translate(0,0) rotate(0deg) scale(1) skew(0deg,0deg);
filter: drop-shadow(0 0 4px currentColor);
}
100% {
opacity: 0;
transform: translate(calc(var(--x) * 150px), calc(var(--y) * 150px)) rotate(calc(var(--r)*360deg)) scale(0) skew(calc(var(--sx)*20deg), calc(var(--sy)*20deg));
filter: drop-shadow(0 0 12px currentColor);
}
}
</style>
</head>
<body>
<div class="container" aria-label="ASCII art of simple human figure breaking apart with tricolor glow">
<span class="piece" style="--i:0; --x:0; --y:-1; --r:0.3; --sx:1; --sy:0;"></span>
<span class="piece" style="--i:1; --x:0; --y:-1; --r:0.5; --sx:0; --sy:1;">O</span>
<br>
<span class="piece" style="--i:2; --x:-0.8; --y:-0.5; --r:0.7; --sx:-1; --sy:0;"> /</span>
<span class="piece" style="--i:3; --x:0; --y:-0.6; --r:0.9; --sx:1; --sy:-1;">|</span>
<span class="piece" style="--i:4; --x:0.8; --y:-0.5; --r:0.4; --sx:0; --sy:1;">\</span>
<br>
<span class="piece" style="--i:5; --x:-0.6; --y:0.3; --r:0.8; --sx:0; --sy:-1;"> /</span>
<span class="piece" style="--i:6; --x:0; --y:0.4; --r:0.6; --sx:1; --sy:0;"> \</span>
</div>
</body>
</html>