.container
.heart
.fist$skin: rgba(175, 126, 86, 1);
$shadow: rgba(132, 86, 55, 1);
$heart: rgba(30, 30, 33, 1);
$bg: rgba(19, 17, 17, 1);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: $bg;
}
.container {
position: relative;
width: 50%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
&:before {
display: block;
content: "";
width: 100%;
padding-top: (1 / 1) * 100%;
}
}
.heart {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
width: 60%;
height: 60%;
background-color: $heart;
&:before, &:after {
display: block;
content: '';
height: 100%;
width: 100%;
background-color: $heart;
position: absolute;
border-radius: 50%;
}
&:before {
top: -50%;
}
&:after {
top: 0%;
left: -50%;
}
}
.fist {
width: 25%;
height: 25%;
position: absolute;
left: 23%;
top: 20%;
z-index: 1000;
// transform: rotate(-45deg);
background:
// pinky
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 10% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 0% 34% / 20% 20%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 58% / 20% 20%,
// ring-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 5% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 24% 30% / 20% 24%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 58% / 20% 20%,
// thumb
radial-gradient(100% 100% at 100% 50%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 35% 50% / 20% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 65% 50% / 27% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%) 72% 50% / 35% 20%,
radial-gradient(200% 205% at 0% 100%, $skin, $skin 50%, transparent 50%) 93% 49% / 13% 17%,
radial-gradient(150% 100% at 100% 100%, transparent, transparent 46%, $shadow 46%, $shadow 50%, transparent 50% ) 60% 60% / 20% 40%,
// middle-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 1% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 48% 28% / 20% 27%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 58% / 20% 20%,
// pointer-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 4% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 72% 29% / 20% 25%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 58% / 20% 20%,
//palm
radial-gradient(200% 200% at 100% 0%, $skin, $skin 50%, transparent 50%) 0% 92% / 40% 51%,
radial-gradient(200% 200% at 0% 0%, $skin, $skin 50%, transparent 50%) 86% 93% / 55% 40%,
// radial-gradient(100% 200% at 50% 0%, $skin, $skin 50%, transparent 50%) 0% 90% / 96% 47%,
;
background-repeat: no-repeat;
&:before {
$skin: rgba(123,83,62,1);
$shadow: rgba(86,53,39,1);
display: block;
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 115%;
z-index: 1000;
background:
// pinky
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 10% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 0% 34% / 20% 20%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 58% / 20% 20%,
// ring-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 5% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 24% 30% / 20% 24%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 58% / 20% 20%,
// thumb
radial-gradient(100% 100% at 100% 50%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 35% 50% / 20% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 65% 50% / 27% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%) 72% 50% / 35% 20%,
radial-gradient(200% 205% at 0% 100%, $skin, $skin 50%, transparent 50%) 93% 49% / 13% 17%,
radial-gradient(150% 100% at 100% 100%, transparent, transparent 46%, $shadow 46%, $shadow 50%, transparent 50% ) 60% 60% / 20% 40%,
// middle-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 1% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 48% 28% / 20% 27%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 58% / 20% 20%,
// pointer-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 4% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 72% 29% / 20% 25%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 58% / 20% 20%,
//palm
radial-gradient(200% 200% at 100% 0%, $skin, $skin 50%, transparent 50%) 0% 92% / 40% 51%,
radial-gradient(200% 200% at 0% 0%, $skin, $skin 50%, transparent 50%) 86% 93% / 55% 40%,
;
background-repeat: no-repeat;
}
&:after {
$skin: rgba(213, 171, 136, 1);
$shadow: rgba(170, 127, 82, 1);
display: block;
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 65%;
top: 90%;
z-index: 1000;
background:
// pinky
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 10% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 0% 34% / 20% 20%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 0% 58% / 20% 20%,
// ring-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 5% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 24% 30% / 20% 24%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 24% 58% / 20% 20%,
// thumb
radial-gradient(100% 100% at 100% 50%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 35% 50% / 20% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 65% 50% / 27% 20%,
linear-gradient($shadow, $shadow 5%, $skin 5%) 72% 50% / 35% 20%,
radial-gradient(200% 205% at 0% 100%, $skin, $skin 50%, transparent 50%) 93% 49% / 13% 17%,
radial-gradient(150% 100% at 100% 100%, transparent, transparent 46%, $shadow 46%, $shadow 50%, transparent 50% ) 60% 60% / 20% 40%,
// middle-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 1% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 48% 28% / 20% 27%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 48% 58% / 20% 20%,
// pointer-finger
radial-gradient(100% 100% at 50% 100%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 4% / 20% 20%,
linear-gradient(90deg, $shadow, $shadow 5%, $skin 5%, $skin 95%, $shadow 95%) 72% 29% / 20% 25%,
radial-gradient(100% 100% at 50% 0%, $skin, $skin 45%, $shadow 45%, $shadow 50%, transparent 50%) 72% 58% / 20% 20%,
//palm
radial-gradient(200% 200% at 100% 0%, $skin, $skin 50%, transparent 50%) 0% 92% / 40% 51%,
radial-gradient(200% 200% at 0% 0%, $skin, $skin 50%, transparent 50%) 86% 93% / 55% 40%,
;
background-repeat: no-repeat;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.