@import url('https://fonts.googleapis.com/css2?family=GFS+Neohellenic&display=swap');
body {
min-height: 100vh;
padding: 0;
margin: 0;
display: grid;
place-items: center;
}
article {
--skin: #fca; /* #fca */
--skin-dark: #eb9;
--tunic: #fed;
--line: #8502;
--hair: #642;
display: flex;
gap: 1.5vmin;
flex-wrap: wrap;
max-width: 100vmin;
margin: 4vmin;
justify-content: center;
}
section {
position: relative;
border: 0.5vmin solid;
border-radius: 0.5vmin;
width: 49vmin;
height: 75vmin;
font-family: 'GFS Neohellenic', Helvetica, Arial, sans-serif;
overflow: hidden;
background: linear-gradient(#c9c7, #c9c0);
box-sizing: border-box;
perspective: 1000px;
}
section *,
section *::before,
section *::after {
position: absolute;
box-sizing: border-box;
}
h2 {
top: 0;
left: 0.75vmin;
margin: 0;
padding: 0.5vmin;
font-size: 4vmin;
font-weight: 400;
}
.face {
--mouth: radial-gradient(farthest-side at 50% 100%, #fff 20%, #0000 0) 90% 80% / 75% 20% no-repeat;
--eye-size: 4%;;
width: 33%;
height: 31%;
background:
/* hair */
radial-gradient(120% 100% at 100% 0, var(--hair) 23%, #0000 0),
radial-gradient(120% 190% at 0 0, var(--hair) 23%, #0000 0),
radial-gradient(120% 190% at 70% 0, var(--hair) 10%, #0000 0),
radial-gradient(120% 190% at 55% -10%, var(--hair) 14%, #0000 0),
radial-gradient(120% 120% at 30% 0, var(--hair) 20%, #0000 0),
/* eyes */
radial-gradient(100% 100% at 55% 50%, #000 var(--eye-size), #0000 0),
radial-gradient(90% 100% at 88% 54%, #000 var(--eye-size), #0000 0),
/* mouth */
var(--mouth),
/* avoid weird lines in Firefox and Safari */
linear-gradient(var(--hair) 10%, var(--skin) 0),
linear-gradient(90deg, var(--hair) 1%, var(--skin) 0)
;
border-radius: 100% 100% 100% 130% / 70% 70% 150% 130%;
top: 23%;
left: 26%;
transform: rotate(10deg);
box-shadow: inset 0.5vmin 2.5vmin var(--hair);
}
.body {
width: 70%;
height: 40%;
border-radius: 60% 100% 40% 100% / 100% 60% 100% 60%;
transform: rotate(-15deg);
top: 30%;
left: -40%;
box-shadow:
inset -0.5vmin -7vmin var(--skin)
}
.body::before {
content: "";
width: 60%;
height: 100%;
background:
radial-gradient(38% 50% at 50% 0%, var(--skin-dark) 99.9%, #0000 0),
var(--skin);
transform: rotate(30deg);
left: 75%;
border-radius: 100% / 0 0 0 20%;
top: 30%;
clip-path: polygon(20% 0, 40% 0, 56% 51%, 100% 51%, 100% 100%, 10% 100%);
}
.tunic {
width: 90%;
height: 60%;
background: #00f3;
border-radius: 40% 40% 130% 80% / 79% 120% 70% 70%;
top: 58.5%;
left: -15%;
transform: rotate(-2deg);
background:
radial-gradient(100% 200% at 0 0, #0000 40%, var(--line) 40.25% 42%, #0000 42.25%) 98% 10% / 30% 30% no-repeat,
radial-gradient(100% 140% at 5% 0, #0000 40%, var(--line) 40.25% 42%, #0000 42.25%) 107% 25% / 40% 50% no-repeat,
radial-gradient(100% 140% at 95% -10%, #0000 40%, var(--line) 40.25% 41.3%, #0000 41.5%) -300% 25% / 90% 60% no-repeat,
radial-gradient(100% 70% at 95% -10%, #0000 40%, var(--line) 40.25% 42%, #0000 42.25%) -20% 35% / 70% 40% no-repeat,
radial-gradient(70% 70% at 105% -10%, #0000 40%, var(--line) 41.25% 41.5%, #0000 42.25%) -130% 195% / 80% 80% no-repeat,
radial-gradient(150% 100% at 50% 0, #0000 20%, var(--tunic) 0),
linear-gradient(#0000 2%, var(--skin) 0)
;
-webkit-mask: radial-gradient(310% 400% at 0% 50%, #000 30%, #0000 0);
mask: radial-gradient(310% 400% at 0% 50%, #000 30%, #0000 0);
}
.arm {
width: 18%;
height: 70%;
background: var(--skin);
border-radius: 100% / 40%;
top: 58%;
left: 65%;
transform: rotate(-15deg);
}
.eyebrow {
width: 35%;
height: 20%;
border: 0.5vmin solid #0000;
border-top: 0.75vmin solid var(--hair);
border-radius: 50%;
transform: rotate(-10deg);
top: 35%;
left: 35%;
}
.eyebrow + .eyebrow {
transform: rotate(20deg);
left: 72%;
top: 38%;
}
.nose {
width: 15%;
height: 40%;
border-right: 0.5vmin solid var(--skin-dark);
border-bottom: 0.5vmin solid var(--skin-dark);
border-radius: 100% 100% 40% 20%;
top: 35%;
left: 65%;
}
.ear {
width: 24%;
height: 24%;
background: var(--skin);
border-radius: 50%;
transform: rotate(-15deg);
top: 42%;
left: -15%;
}
.hair-back {
background: var(--hair);
width: 25%;
height: 26%;
border-radius: 50%;
top: 18%;
left: 15%;
}
.hair-back::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow:
-2.5vmin 0.25vmin 0 -2vmin gold,
-6vmin 0 0 -3vmin var(--hair),
-7vmin 2vmin 0 -4.5vmin var(--hair),
15.5vmin -0.5vmin 0 -4.5vmin var(--hair)
}
.hair-back::before {
content: "";
width: 100%;
height: 55%;
border-radius: 50%;
background: var(--hair);
left: -35%;
top: 23%;
box-shadow:
2vmin 5vmin 0 -1.25vmin var(--hair),
-2vmin 3vmin 0 -2.5vmin var(--hair),
10.5vmin -5vmin 0 1vmin var(--hair),
15vmin -5vmin 0 -1vmin var(--hair),
18vmin 0 0 -2vmin var(--hair),
17.75vmin 1vmin 0 -2vmin var(--hair),
17.75vmin -3vmin 0 -2vmin var(--hair)
}
.box {
width: 80%;
height: 15%;
bottom: 0;
right: 0;
border-radius: 0.5vmin 0 0 0;
background:
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 2vmin 2vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 1vmin 1vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 3vmin 1vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 1vmin 3vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 3vmin 3vmin / 5vmin 1vmin repeat-x,
linear-gradient(#eb6 5vmin, #0000 0),
repeating-linear-gradient(90deg, #0000 0 17%, #0004 0 17.5%),
#c96
;
box-shadow:
inset -18.5vmin 0 #0002,
/* -0.5vmin 1vmin 2vmin #c002, */
0 0 5vmin #8003;
}
.box::after {
content: "";
height: 5vmin;
width: 60%;
background: red;
right: 18.5vmin;
top: -5vmin;
background:
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 2vmin 2vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 1vmin 1vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 3vmin 1vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 1vmin 3vmin / 5vmin 1vmin repeat-x,
conic-gradient(at 1vmin 1vmin, #0000 75%, #000c 0) 3vmin 3vmin / 5vmin 1vmin repeat-x,
linear-gradient(#eb6 5vmin, #0000 0)
;
transform-origin: 100% 100%;
transform: rotate(130deg)
}
.box::before {
content: "";
height: 187%;
width: 100%;
background:
linear-gradient(#eb6 18%, #0000 0),
repeating-linear-gradient(108deg, #0000 0 17%, #0004 0 17.5%),
#c96;
top: 3.2vmin;
transform: translate(62%, -100%) skew(-28deg);
transform-origin: 0 100%;
box-shadow: inset 0 0 0 80vmin #0002
}
.box-glow {
width: 80%;
height: 50%;
background: #f003;
bottom: 0;
right: -5%;
background: radial-gradient(farthest-side at 50% 100%, #0c03, #0000)
}
.text {
font-size: 4.5vmin;
text-shadow:
1px 0px 2px #fff,
1px 1px 2px #fff,
0px 1px 2px #fff,
-1px 1px 2px #fff,
-1px 0px 2px #fff,
-1px -1px 2px #fff,
0px -1px 2px #fff,
1px -1px 2px #fff;
}
.text span:nth-child(1) { offset-distance: calc(var(--d) + 1vmin); }
.text span:nth-child(2) { offset-distance: calc(var(--d) + 3vmin); }
.text span:nth-child(3) { offset-distance: calc(var(--d) + 4.75vmin); }
.text span:nth-child(4) { offset-distance: calc(var(--d) + 6vmin); }
.text span:nth-child(5) { offset-distance: calc(var(--d) + 7.25vmin); }
.text span:nth-child(6) { offset-distance: calc(var(--d) + 8.5vmin); }
.text span:nth-child(7) { offset-distance: calc(var(--d) + 10vmin); }
.text span:nth-child(8) { offset-distance: calc(var(--d) + 12vmin); }
.text span:nth-child(9) { offset-distance: calc(var(--d) + 14vmin); }
.text span:nth-child(10) { offset-distance: calc(var(--d) + 16vmin); }
.text-1 {
--d: 4vmin;
top: 63%;
left: 38%;
transform: rotate(40deg)
}
.text-2 {
--d: 5vmin;
top: 50%;
left: 48%;
transform: rotate(64deg);
}
.text-2 span:nth-child(3) { offset-distance: calc(var(--d) + 4.5vmin); }
.text-2 span:nth-child(4) { offset-distance: calc(var(--d) + 6.5vmin); }
.text-2 span:nth-child(5) { offset-distance: calc(var(--d) + 8.5vmin); }
.text-2 span:nth-child(6) { offset-distance: calc(var(--d) + 10.5vmin); }
.text-2 span:nth-child(7) { offset-distance: calc(var(--d) + 12.25vmin); }
.text-2 span:nth-child(8) { offset-distance: calc(var(--d) + 13.75vmin); }
.text-3 {
--d: 0vmin;
top: 78%;
left: 25%;
}
.text-4 {
--d: 1vmin;
top: 60%;
left: 75%;
transform: rotate(-80deg);
}
.text-5 {
--d: 3vmin;
top: 80%;
left: 40%;
}
.text-1 span {
offset-path: path('M0,0 C30,50 100,-40 100,0');
}
.text-2 span {
offset-path: path('M0,0 C30,-30 200,-30 200,0');
}
.text-3 span {
offset-path: path('M0,0 C30,-30 100,-30 100,0');
}
.text-4 span {
offset-path: path('M0,0 C50,30 100,30 150,0');
}
.text-5 span {
offset-path: path('M0,0 C50,-30 100,30 80,0');
}
.text-lines {
width: 15%;
height: 25%;
border-radius: 50% 60% 50% 0;
box-shadow: 0.5vmin -0.5vmin;
transform: rotate(-20deg);
top: 70%;
left: 25%;
filter: drop-shadow(-4vmin 16vmin)
}
.text-lines::before {
content: "";
width: 230%;
height: 240%;
border-radius: 50%;
box-shadow: -0.5vmin -0.5vmin;
transform: rotate(33deg) translate(50%, -60%);
filter: drop-shadow(5vmin 25vmin)
}
.text-lines::after {
content: "";
width: 140%;
height: 240%;
border-radius: 100%;
box-shadow: 0.5vmin 0.5vmin;
transform: rotate(20deg) translate(-10%, -20%);
filter: drop-shadow(-2vmin 13vmin)
}
/* box model */
.box-model .text-1 {
--d: 1.5vmin
}
.box-model .text-3 {
--d: 0.5vmin
}
.box-model .text-1 span:nth-child(3) { offset-distance: calc(var(--d) + 4.75vmin); }
.box-model .text-1 span:nth-child(4) { offset-distance: calc(var(--d) + 6.25vmin); }
.box-model .text-1 span:nth-child(5) { offset-distance: calc(var(--d) + 8.25vmin); }
.box-model .text-1 span:nth-child(6) { offset-distance: calc(var(--d) + 10vmin); }
.box-model .face {
--eye-size: 5%;
--mouth:
radial-gradient(110% 80% at 50% 100%, var(--skin) 10%, #0000 0) 200% 80% / 95% 30% no-repeat,
radial-gradient(farthest-side at 50% 100%, #fff 20%, #0000 0) 200% 80% / 95% 30% no-repeat;
}
/* box-shadow */
.box-shadow {
box-shadow:
-1vmin -1vmin #0804,
1vmin 3vmin #f004,
-2vmin 2vmin #00f4
}
.box-shadow .text-1 {
--d: 0.5vmin;
}
.box-shadow .face {
--mouth: radial-gradient(farthest-side at 50% 0%, #fff 20%, #0000 0) 200% 100% / 95% 20% no-repeat;
}
/* codesandbox */
.codesandbox .face {
--mouth:
radial-gradient(110% 80% at 50% 0%, var(--skin) 10%, #0000 0) 200% 100% / 95% 20% no-repeat,
radial-gradient(farthest-side at 50% 0%, #fff 20%, #0000 0) 200% 100% / 95% 20% no-repeat;
}
.codesandbox .text-lines {
filter: none;
box-shadow: none;
}
.codesandbox .text-lines::before {
display: none;
}
.codesandbox .text-lines::after {
filter: none;
width: 230%;
top: 50%;
left: 80%;
box-shadow: -0.5vmin 0.5vmin;
}
.codesandbox .logo,
.codesandbox .logo::before,
.codesandbox .logo::after {
--size: 6vmin;
--from: 0.25turn;
--color: #ddd;
width: var(--size);
aspect-ratio: 0.9;
background:
conic-gradient(from var(--from), #000 0 25%, #0000 0),
var(--color);
box-shadow: inset 0 0 0 calc(var(--size) * 0.15);
transform-style: preserve-3d;
}
.codesandbox .logo {
top: 58%;
left: 68%;
transform: skewY(-24deg);
transform-origin: 0 50%;
}
.codesandbox .logo::before {
content: "";
--color: #fff;
--from: 0.5turn;
transform-origin: 100% 100%;
transform: translate(-100%, 0) skewY(42deg);
}
.codesandbox .logo::after {
content: "";
--color: #fff;
--from: 0turn;
aspect-ratio: 1.09;
transform-origin: 50% 0%;
transform: skewX(48deg) translate(0%, -99%) ;
}
/* Flexbox */
.flexbox .face {
--mouth:
radial-gradient(farthest-side at 50% 100%, var(--skin) 20%, #0000 0) 30% 84.5% / 150% 15% no-repeat,
radial-gradient(farthest-side at 50% 100%, #fff 20%, #0000 0) 0% 77% / 120% 40% no-repeat,
radial-gradient(200% 50% at 60% 65%, #f001, #f000 30%),
linear-gradient(#00f6, #00f0 50%)
;
--eye-size: 5.25%;
}
.flexbox .text-1 { --d: 0vmin; }
.flexbox .text-1 span:nth-child(6) { offset-distance: calc(var(--d) + 9.25vmin); }
.flexbox .text-2 {
--d: 0pc;
top: 53%;
left: 58%;
}
.flexbox .text-2 span:nth-child(4) { offset-distance: calc(var(--d) + 7vmin); }
.flexbox .text-4 span:nth-child(4) { offset-distance: calc(var(--d) + 6.5vmin); }
.flexbox .text-4 span:nth-child(5) { offset-distance: calc(var(--d) + 8vmin); }
.flexbox .text-6 {
transform: rotate(-30deg);
top: 65%;
left: 58%;
white-space: pre;
}
.flexbox .text-7 {
top: 30%;
left: 65%;
transform: rotate(-95deg) perspective(50vmin) rotateY(20deg) rotateX(15deg);
white-space: pre;
}
.flexbox .text-8 {
transform: rotate(83deg);
top: 55%;
left: 86%;
}
.flexbox .text-9 {
transform: rotate(15deg);
top: 62%;
left: 55%;
}
.flexbox .drop {
width: 11%;
aspect-ratio: 1;
border-radius: 0 100% 100% 100%;
background:
radial-gradient(circle at 40% 80%, white 13%, #0000 0),
#beeeef;
transform: rotate(50deg) skew(10deg);
top: 27%;
left: 25%;
}
!
