<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>octopus | pure CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tentacle _1" style="--index:1;--flip:0;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _2" style="--index:2;--flip:0;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _3" style="--index:3;--flip:0;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _4" style="--index:0;--flip:0;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _5" style="--index:1;--flip:1;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _6" style="--index:2;--flip:1;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _7" style="--index:3;--flip:1;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tentacle _8" style="--index:0;--flip:1;">
<div style="--delay:0s;">
<div style="--delay:-0.19999999999999973s;">
<div style="--delay:-0.3999999999999999s;">
<div style="--delay:-0.5999999999999996s;">
<div style="--delay:-0.7999999999999998s;">
<div style="--delay:-1s;">
<div style="--delay:-1.1999999999999997s;">
<div style="--delay:-1.4s;">
<div style="--delay:-1.5999999999999996s;">
<div style="--delay:-1.7999999999999998s;">
<div style="--delay:-2s;">
<div style="--delay:-2.2s;">
<div style="--delay:-2.4s;">
<div style="--delay:-2.5999999999999996s;">
<div style="--delay:-2.8s;">
<div style="--delay:-3s;">
<div style="--delay:-3.2s;">
<div style="--delay:-3.4s;">
<div style="--delay:-3.6s;">
<div style="--delay:-3.8s;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="head"></div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/octopus-orandxa0pure-css-vRpwqP */
body {
font-size: 40px;
overflow: hidden;
background: DarkSeaGreen;
}
.head {
position: absolute;
top: 50%;
left: 50%;
height: 5em;
width: 5em;
margin: -2.5em;
background: GoldenRod;
z-index: 5;
border-radius: 100% 100% 30%;
transform: translateY(-3em) rotate(45deg);
box-shadow: 0.2em 0.2em 0 0.24em #d6a21f inset, -0.1em -0.1em 0 0.1em #dcaa2b inset;
}
.head:before, .head:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: black;
height: 0.8em;
width: 0.8em;
border-radius: 100%;
box-shadow: 0.1em 0.1em 0 0.2em white inset;
}
.head:before {
transform: translate(1em, 2em);
}
.head:after {
transform: translate(2em, 1em);
}
.tentacle {
position: absolute;
top: 50%;
left: 50%;
margin: -1.5em -0.5em;
transform-origin: 50% 50%;
height: 3em;
width: 1em;
z-index: calc(4 - var(--index));
transform: translate3d(calc(-0.5em + 1em * var(--flip)), calc(0.3em * var(--index)), 0) rotateX(calc(180deg * var(--flip))) rotate(calc(200deg + 15deg * var(--index) + 180deg * var(--flip)));
}
.tentacle div {
font-size: 0.9em;
height: 3em;
width: 1em;
border-radius: 100% 100%;
background: GoldenRod;
box-shadow: 0.1em -0.8em 0 #dcaa2b inset, 0 0 0 0.3em #d6a21f inset;
position: absolute;
top: 25%;
left: 50%;
animation: rot 3s ease-in-out alternate infinite;
}
.tentacle div:before {
content: '';
position: absolute;
z-index: 2;
top: 50%;
right: 100%;
background: salmon;
height: 0.7em;
width: 0.3em;
margin: -0.35em -0.15em;
border-radius: 100%;
box-shadow: -0.1em 0.1em 0 #c8665b inset, 0 0 0 0.1em #d56d61 inset;
}
.tentacle div div {
top: auto;
bottom: 1em;
left: auto;
right: 0;
transform: rotate(5deg);
transform-origin: 100% 100%;
animation-delay: var(--delay, 0s);
}
@keyframes rot {
0% {
transform: rotate(5deg);
}
100% {
transform: rotate(-5deg);
}
}