<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trapped Alien</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
}
.scene {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at bottom, #999 -100%, #001 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.scene h1 {
position: absolute;
bottom: 0;
font-size: 10vmin;
font-family: Poppins, sans-serif;
font-weight: 200;
padding: .2em;
color: transparent;
-webkit-text-fill-color: transparent;
background: linear-gradient(#fff, #000) no-repeat 50% 50% / 100% 125% text;
letter-spacing: -2px;
word-spacing: 2px;
text-align: center;
filter: drop-shadow(0 0 5px indigo) drop-shadow(0 0 50px indigo);
animation: h1-blink 1s linear infinite;
}
@keyframes h1-blink {
50% {
opacity: 0;
}
}
.hole {
--size: 400px;
--eyes-offset: 20%;
--nose-scale: 3;
--body-size: 60%;
--border-width: 3px;
--body: #27E546;
--body-shadow: rgba(0 0 0 / .3);
--body-highlight: rgba(200 255 200 / .7);
--darker-body: color-mix(in srgb, var(--body), black);
--border: var(--border-width) solid black;
--move: 0;
position: relative;
width: var(--size);
aspect-ratio: 2/.625;
background-color: rgb(53, 33, 68);
border: var(--border);
border-radius: 50%;
box-shadow: 0 5px 0px var(--body-shadow);
}
.hole .stars {
--star-color: #fff;
position: absolute;
inset: 0;
background-color: transparent;
border-radius: inherit;
overflow: hidden;
}
.hole .stars::before,
.hole .stars::after {
content: '';
position: absolute;
display: block;
width: 1px;
height: 1px;
background-color: transparent;
}
.hole .stars-1::before {
box-shadow: 330px 183px #fff, 228px 94px #fff, 83px 58px #fff, 268px 129px #fff, 138px 214px #fff, 134px 90px #fff, 170px 88px #fff, 232px 179px #fff, 45px 219px #fff, 290px 91px #fff, 134px 24px #fff, 5px 110px #fff, 391px 95px #fff, 302px 164px #fff, 321px 206px #fff, 176px 103px #fff, 87px 115px #fff, 192px 27px #fff, 37px 196px #fff, 20px 160px #fff, 220px 204px #fff, 126px 87px #fff, 162px 29px #fff, 177px 64px #fff, 246px 143px #fff, 94px 156px #fff, 262px 11px #fff, 161px 20px #fff, 68px 200px #fff, 362px 15px #fff, 284px 126px #fff, 2px 148px #fff, 139px 235px #fff, 170px 202px #fff, 139px 145px #fff, 114px 4px #fff, 370px 17px #fff, 91px 8px #fff, 393px 99px #fff, 29px 161px #fff, 94px 185px #fff, 345px 159px #fff, 136px 149px #fff, 206px 57px #fff, 189px 149px #fff, 260px 172px #fff, 51px 40px #fff, 208px 66px #fff, 351px 75px #fff, 242px 60px #fff, 340px 153px #fff, 3px 93px #fff, 36px 117px #fff, 164px 90px #fff, 223px 40px #fff, 378px 233px #fff, 207px 159px #fff, 390px 133px #fff, 46px 47px #fff, 20px 207px #fff, 216px 90px #fff, 351px 115px #fff, 153px 39px #fff, 218px 120px #fff, 260px 89px #fff, 316px 52px #fff, 106px 123px #fff, 77px 165px #fff, 165px 197px #fff, 23px 17px #fff, 271px 223px #fff, 82px 122px #fff, 34px 22px #fff, 84px 41px #fff, 132px 10px #fff, 285px 197px #fff, 376px 149px #fff, 114px 141px #fff, 161px 123px #fff, 225px 106px #fff, 59px 114px #fff, 208px 236px #fff, 376px 54px #fff, 220px 34px #fff, 173px 101px #fff, 337px 54px #fff, 221px 79px #fff, 253px 28px #fff, 161px 137px #fff, 195px 161px #fff, 84px 82px #fff, 23px 188px #fff, 333px 38px #fff, 176px 10px #fff, 186px 22px #fff, 187px 62px #fff, 21px 62px #fff, 117px 130px #fff, 128px 167px #fff, 351px 34px #fff, 301px 68px #fff, 212px 220px #fff, 287px 232px #fff, 169px 69px #fff, 9px 85px #fff, 118px 54px #fff, 165px 89px #fff, 214px 218px #fff, 311px 195px #fff, 314px 224px #fff, 186px 21px #fff, 240px 8px #fff, 196px 186px #fff, 342px 2px #fff, 173px 23px #fff, 90px 73px #fff, 90px 9px #fff, 9px 174px #fff, 315px 3px #fff, 347px 121px #fff, 137px 105px #fff, 271px 151px #fff, 389px 44px #fff, 133px 36px #fff, 278px 151px #fff, 287px 46px #fff, 311px 48px #fff, 225px 150px #fff, 35px 219px #fff, 135px 235px #fff, 338px 161px #fff, 26px 199px #fff, 176px 166px #fff, 144px 0px #fff, 276px 117px #fff, 366px 79px #fff, 217px 94px #fff, 153px 151px #fff, 162px 130px #fff, 175px 47px #fff, 156px 83px #fff, 111px 57px #fff, 312px 68px #fff, 367px 121px #fff, 37px 207px #fff, 300px 39px #fff, 259px 79px #fff, 170px 225px #fff, 51px 99px #fff, 3px 161px #fff, 134px 90px #fff, 12px 40px #fff, 54px 201px #fff, 25px 72px #fff, 210px 181px #fff, 228px 16px #fff, 322px 192px #fff, 296px 172px #fff, 207px 92px #fff, 12px 190px #fff, 219px 93px #fff, 149px 166px #fff, 307px 57px #fff, 121px 4px #fff, 265px 115px #fff, 247px 62px #fff, 115px 191px #fff, 390px 162px #fff, 349px 54px #fff, 375px 19px #fff, 206px 7px #fff, 305px 195px #fff, 85px 89px #fff, 280px 230px #fff, 219px 118px #fff, 72px 113px #fff, 41px 186px #fff, 105px 63px #fff, 86px 4px #fff, 320px 38px #fff, 387px 22px #fff, 254px 51px #fff, 202px 130px #fff, 236px 79px #fff, 160px 164px #fff, 300px 228px #fff, 85px 134px #fff, 285px 106px #fff, 221px 91px #fff, 95px 53px #fff, 172px 209px #fff, 349px 205px #fff, 97px 133px #fff, 154px 145px #fff, 143px 61px #fff, 191px 29px #fff, 179px 4px #fff, 47px 171px #fff, 369px 42px #fff, 323px 19px #fff;
animation: stars-anim 5s linear infinite;
}
.hole .stars-1::after {
top: 200%;
box-shadow: 330px 183px #fff, 228px 94px #fff, 83px 58px #fff, 268px 129px #fff, 138px 214px #fff, 134px 90px #fff, 170px 88px #fff, 232px 179px #fff, 45px 219px #fff, 290px 91px #fff, 134px 24px #fff, 5px 110px #fff, 391px 95px #fff, 302px 164px #fff, 321px 206px #fff, 176px 103px #fff, 87px 115px #fff, 192px 27px #fff, 37px 196px #fff, 20px 160px #fff, 220px 204px #fff, 126px 87px #fff, 162px 29px #fff, 177px 64px #fff, 246px 143px #fff, 94px 156px #fff, 262px 11px #fff, 161px 20px #fff, 68px 200px #fff, 362px 15px #fff, 284px 126px #fff, 2px 148px #fff, 139px 235px #fff, 170px 202px #fff, 139px 145px #fff, 114px 4px #fff, 370px 17px #fff, 91px 8px #fff, 393px 99px #fff, 29px 161px #fff, 94px 185px #fff, 345px 159px #fff, 136px 149px #fff, 206px 57px #fff, 189px 149px #fff, 260px 172px #fff, 51px 40px #fff, 208px 66px #fff, 351px 75px #fff, 242px 60px #fff, 340px 153px #fff, 3px 93px #fff, 36px 117px #fff, 164px 90px #fff, 223px 40px #fff, 378px 233px #fff, 207px 159px #fff, 390px 133px #fff, 46px 47px #fff, 20px 207px #fff, 216px 90px #fff, 351px 115px #fff, 153px 39px #fff, 218px 120px #fff, 260px 89px #fff, 316px 52px #fff, 106px 123px #fff, 77px 165px #fff, 165px 197px #fff, 23px 17px #fff, 271px 223px #fff, 82px 122px #fff, 34px 22px #fff, 84px 41px #fff, 132px 10px #fff, 285px 197px #fff, 376px 149px #fff, 114px 141px #fff, 161px 123px #fff, 225px 106px #fff, 59px 114px #fff, 208px 236px #fff, 376px 54px #fff, 220px 34px #fff, 173px 101px #fff, 337px 54px #fff, 221px 79px #fff, 253px 28px #fff, 161px 137px #fff, 195px 161px #fff, 84px 82px #fff, 23px 188px #fff, 333px 38px #fff, 176px 10px #fff, 186px 22px #fff, 187px 62px #fff, 21px 62px #fff, 117px 130px #fff, 128px 167px #fff, 351px 34px #fff, 301px 68px #fff, 212px 220px #fff, 287px 232px #fff, 169px 69px #fff, 9px 85px #fff, 118px 54px #fff, 165px 89px #fff, 214px 218px #fff, 311px 195px #fff, 314px 224px #fff, 186px 21px #fff, 240px 8px #fff, 196px 186px #fff, 342px 2px #fff, 173px 23px #fff, 90px 73px #fff, 90px 9px #fff, 9px 174px #fff, 315px 3px #fff, 347px 121px #fff, 137px 105px #fff, 271px 151px #fff, 389px 44px #fff, 133px 36px #fff, 278px 151px #fff, 287px 46px #fff, 311px 48px #fff, 225px 150px #fff, 35px 219px #fff, 135px 235px #fff, 338px 161px #fff, 26px 199px #fff, 176px 166px #fff, 144px 0px #fff, 276px 117px #fff, 366px 79px #fff, 217px 94px #fff, 153px 151px #fff, 162px 130px #fff, 175px 47px #fff, 156px 83px #fff, 111px 57px #fff, 312px 68px #fff, 367px 121px #fff, 37px 207px #fff, 300px 39px #fff, 259px 79px #fff, 170px 225px #fff, 51px 99px #fff, 3px 161px #fff, 134px 90px #fff, 12px 40px #fff, 54px 201px #fff, 25px 72px #fff, 210px 181px #fff, 228px 16px #fff, 322px 192px #fff, 296px 172px #fff, 207px 92px #fff, 12px 190px #fff, 219px 93px #fff, 149px 166px #fff, 307px 57px #fff, 121px 4px #fff, 265px 115px #fff, 247px 62px #fff, 115px 191px #fff, 390px 162px #fff, 349px 54px #fff, 375px 19px #fff, 206px 7px #fff, 305px 195px #fff, 85px 89px #fff, 280px 230px #fff, 219px 118px #fff, 72px 113px #fff, 41px 186px #fff, 105px 63px #fff, 86px 4px #fff, 320px 38px #fff, 387px 22px #fff, 254px 51px #fff, 202px 130px #fff, 236px 79px #fff, 160px 164px #fff, 300px 228px #fff, 85px 134px #fff, 285px 106px #fff, 221px 91px #fff, 95px 53px #fff, 172px 209px #fff, 349px 205px #fff, 97px 133px #fff, 154px 145px #fff, 143px 61px #fff, 191px 29px #fff, 179px 4px #fff, 47px 171px #fff, 369px 42px #fff, 323px 19px #fff;
animation: stars-anim 5s linear infinite;
}
.hole .stars-2::before {
box-shadow: 372px 112px 1px #fff, 76px 22px 1px #fff, 285px 130px 1px #fff, 304px 204px 1px #fff, 374px 114px 1px #fff, 219px 172px 1px #fff, 36px 139px 1px #fff, 249px 158px 1px #fff, 356px 124px 1px #fff, 254px 159px 1px #fff, 253px 37px 1px #fff, 63px 36px 1px #fff, 194px 32px 1px #fff, 294px 145px 1px #fff, 187px 143px 1px #fff, 266px 132px 1px #fff, 83px 88px 1px #fff, 169px 90px 1px #fff, 258px 80px 1px #fff, 348px 232px 1px #fff, 19px 224px 1px #fff, 364px 70px 1px #fff, 363px 103px 1px #fff, 289px 122px 1px #fff, 156px 122px 1px #fff, 385px 154px 1px #fff, 286px 86px 1px #fff, 133px 193px 1px #fff, 145px 53px 1px #fff, 292px 25px 1px #fff, 59px 132px 1px #fff, 69px 31px 1px #fff, 36px 105px 1px #fff, 126px 104px 1px #fff, 4px 153px 1px #fff, 85px 37px 1px #fff, 144px 97px 1px #fff, 115px 38px 1px #fff, 305px 99px 1px #fff, 285px 110px 1px #fff, 285px 17px 1px #fff, 114px 127px 1px #fff, 60px 237px 1px #fff, 322px 189px 1px #fff, 388px 23px 1px #fff, 243px 58px 1px #fff, 40px 168px 1px #fff, 266px 169px 1px #fff, 247px 17px 1px #fff, 142px 114px 1px #fff, 164px 44px 1px #fff, 309px 101px 1px #fff, 74px 66px 1px #fff, 345px 86px 1px #fff, 53px 97px 1px #fff, 69px 45px 1px #fff, 380px 193px 1px #fff, 296px 3px 1px #fff, 349px 195px 1px #fff, 377px 10px 1px #fff, 288px 11px 1px #fff, 6px 210px 1px #fff, 283px 104px 1px #fff, 79px 149px 1px #fff, 138px 84px 1px #fff, 208px 154px 1px #fff, 173px 103px 1px #fff, 43px 185px 1px #fff, 84px 117px 1px #fff, 164px 132px 1px #fff, 348px 236px 1px #fff, 84px 135px 1px #fff, 104px 19px 1px #fff, 296px 219px 1px #fff, 180px 74px 1px #fff, 303px 63px 1px #fff, 245px 197px 1px #fff, 1px 174px 1px #fff, 192px 30px 1px #fff, 82px 86px 1px #fff, 100px 217px 1px #fff, 132px 222px 1px #fff, 376px 88px 1px #fff, 12px 62px 1px #fff, 84px 0px 1px #fff, 108px 193px 1px #fff, 107px 173px 1px #fff, 227px 206px 1px #fff, 228px 126px 1px #fff, 124px 120px 1px #fff, 86px 20px 1px #fff, 24px 136px 1px #fff, 70px 68px 1px #fff, 281px 225px 1px #fff, 143px 181px 1px #fff, 143px 208px 1px #fff, 200px 33px 1px #fff, 107px 173px 1px #fff, 212px 26px 1px #fff, 331px 69px 1px #fff;
animation: stars-anim 10s linear infinite;
}
@keyframes stars-anim {
from {
transform: translateY(0);
}
to {
transform: translateY(calc(-.9 * var(--size)));
}
}
.alien {
--body-glow: color-mix(in srgb, var(--body), transparent);
position: absolute;
width: 100%;
aspect-ratio: 2/1.5;
bottom: -20%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 5px var(--body-glow)) drop-shadow(0 0 15px var(--body-glow));
}
.alien:hover {
--move: 1;
}
.alien::before {
content: '';
position: absolute;
inset: calc(-.25 * var(--size));
z-index: 0;
}
.alien .head {
position: absolute;
width: 100%;
aspect-ratio: 1/1.2;
mask: radial-gradient(250% 152% at 50% 0%, #000 50%, #0000 calc(50% + 1px));
}
.alien .head__inner {
position: absolute;
top: 25%;
width: 60%;
left: 50%;
translate: -50% 0;
aspect-ratio: 1/.5;
background-color: var(--body);
border-radius: 50% / 100% 100% 0 0;
box-shadow: 0 10px 0px -2px var(--body-highlight) inset;
z-index: 2;
border: var(--border);
transform-origin: 50% 200%;
scale: var(--move);
top: calc(((var(--move)) * 25%) + ((1 - var(--move)) * 85%));
animation: move calc(3s * var(--move)) linear infinite;
transition-property: top, scale;
transition-duration: .3s;
transition-delay: .5s;
}
@keyframes move {
50% {
transform: translate(0, -10px);
}
}
.alien .head__inner::after {
content: '';
position: absolute;
top: 100%;
left: calc(-1 * var(--border-width));
width: 100%;
aspect-ratio: 1/.7;
background:
radial-gradient(100% 170% at 50% 0%, var(--body) 50%, var(--body-shadow) 50%),
linear-gradient(var(--body), var(--body));
border-radius: 50% / 0 0 100% 100%;
border: var(--border);
border-top: none;
}
.alien .head__inner .eyes {
position: absolute;
top: 100%;
width: 100%;
height: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--eyes-offset);
}
.alien .head__inner .eyes .eye {
--is-right-eye: -1;
height: 135%;
aspect-ratio: 1;
background-color: black;
border-radius: calc(var(--is-right-eye) * 100%) calc((1 - var(--is-right-eye)) * 100%);
box-shadow: 0 10px 0px -1px gray inset, 0 5px 0px var(--body-shadow);
border: var(--border);
transform: skewY(calc(var(--is-right-eye) *10deg));
animation: blink calc(.5s * var(--blink)) cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
}
.alien .head__inner .nose {
position: absolute;
width: 25%;
height: 1em;
background:
radial-gradient(circle, black 50%, transparent calc(50% + .5px)) no-repeat calc(100% - (65%)) 50% / calc(var(--nose-scale) * var(--border-width)) calc(var(--nose-scale) * var(--border-width)),
radial-gradient(circle, black 50%, transparent calc(50% + .5px)) no-repeat calc(100% - (35%)) 50% / calc(var(--nose-scale) * var(--border-width)) calc(var(--nose-scale) * var(--border-width));
left: 50%;
translate: -50% 0;
top: 160%;
z-index: 2;
filter: drop-shadow(0 2px 0px var(--body-shadow));
}
.alien .head__inner .mouth {
--m-border-width: calc(var(--border-width) * 3);
--border: var(--m-border-width) solid black;
position: absolute;
width: 25%;
height: 2em;
top: 165%;
z-index: 2;
left: 50%;
translate: -50% 0;
border-bottom: var(--border);
border-radius: 50%;
box-shadow: 0 3px 0px var(--body-shadow);
}
.alien .body {
--rotate-hand: 1;
position: absolute;
top: 90%;
width: var(--body-size);
aspect-ratio: 1 /.5;
z-index: 2;
border-radius: 50% / 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 50%;
animation: hands-move calc(1s * var(--move)) infinite;
}
.alien .body .hand {
--is-right-hand: -1;
display: inline-block;
height: calc(100% - var(--body-size));
aspect-ratio: 1.2/1;
background-color: var(--darker-body);
margin-top: -10%;
border-radius: 50% / 50% 50% 100% 100%;
box-shadow: inset 0 -5px 0px var(--body-shadow), inset 0 3px 0px var(--body-highlight), 0 5px 0px var(--body-shadow);
border: var(--border);
transform-origin: 50% 100%;
transform: rotate(calc(var(--rotate-hand) * var(--is-right-hand) * -20deg)) translateY(calc((1 - var(--move)) * 0%));
opacity: var(--move);
transition-property: transform, opacity;
transition-duration: .3s;
transition-delay: calc(1 - var(--move) * .3s);
}
@keyframes hands-move {
50% {
gap: 60%;
--rotate-hand: .7;
}
}
</style>
</head>
<body>
<div class="scene">
<div class="hole">
<div class="stars stars-1"></div>
<div class="stars stars-2"></div>
<div class="alien">
<div class="head">
<div class="head__inner">
<div class="eyes">
<div class="eye"></div>
<div class="eye" style="--is-right-eye: 1;"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
<div class="body">
<div class="hand"></div>
<div class="hand" style="--is-right-hand: 1;"></div>
</div>
</div>
</div>
<h1>Approach the hole!</h1>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.