Seem to love doing this to myself! π
This one was a little harder than I anticipated but it's pure CSS Snorlax π
Not perfect, there are definitely some rough edges ha.
Enjoy!
mixin claw(index) | |
.snorlax__foot-claw(class=`snorlax__foot-claw--${index}`) | |
div | |
.snorlax | |
.snorlax__head | |
.snorlax__head-outline | |
.snorlax__ear.snorlax__ear--left | |
.snorlax__ear.snorlax__ear--right | |
.snorlax__brow.snorlax__brow--left | |
.snorlax__brow.snorlax__brow--right | |
.snorlax__eye.snorlax__eye--left | |
.snorlax__eye.snorlax__eye--right | |
.snorlax__mouth | |
.snorlax__tooth.snorlax__tooth--left | |
.snorlax__tooth.snorlax__tooth--right | |
.snorlax__arm-left | |
.snorlax__arm-wrapper | |
.snorlax__claws--left | |
.snorlax__arm-left-arm | |
.snorlax__arm-right | |
.snorlax__claws--right | |
.snorlax__arm-right-arm | |
.snorlax__claw | |
.snorlax__body | |
.snorlax__body-shade | |
.snorlax__belly | |
.snorlax__belly-segment.snorlax__belly-segment--one | |
.snorlax__belly-segment.snorlax__belly-segment--two | |
.snorlax__left-foot | |
.snorlax__left-foot-foot | |
+claw('one') | |
+claw('two') | |
+claw('three') | |
.snorlax__right-foot | |
.snorlax__right-foot-foot | |
+claw('four') | |
+claw('five') | |
+claw('six') |
// 404 |
* | |
*:after | |
*:before | |
box-sizing border-box | |
:root | |
// We know our img is 300x237 | |
--size 60 | |
--unit calc((var(--size) / 300) * 1vmin) | |
// colors | |
--belly hsl(39, 66%, 84%) | |
--dark-belly hsl(35, 29%, 59%) | |
--body hsl(164, 26%, 28%) | |
--dark-body hsl(199, 43%, 15%) | |
--foot hsl(21, 43%, 41%) | |
--claws hsl(0, 0%, 98%) | |
body | |
min-height 100vh | |
display flex | |
align-items center | |
background hsl(190, 70%, 30%) | |
justify-content center | |
.snorlax | |
* | |
*:after | |
*:before | |
position absolute | |
height calc(237 * var(--unit)) | |
width calc(300 * var(--unit)) | |
position relative | |
&:before | |
content '' | |
position absolute | |
bottom 0 | |
width 100% | |
height 20% | |
border-radius 50% | |
filter blur(10px) | |
opacity 0.5 | |
background #111 | |
transform translate(-50%, 25%) | |
left 50% | |
&__body | |
border-radius 50% 45% 50% 50% / 68% 50% 28% 30% | |
height 74% | |
width 79% | |
border calc(2 * var(--unit)) solid black | |
background var(--body) | |
overflow hidden | |
top 60% | |
left 47% | |
transform translate(-50%, -50%) | |
&-shade | |
background var(--dark-body) | |
height 30% | |
width 80% | |
bottom 0 | |
border-radius 50% | |
left 50% | |
transform translate(-50%, 50%) | |
&:after | |
content '' | |
position absolute | |
width 25% | |
height 150% | |
border-radius 50% | |
background var(--dark-body) | |
left 9% | |
bottom 24% | |
transform rotate(-22deg) | |
&__brow | |
background var(--belly) | |
&--left | |
width 50% | |
height 100% | |
left 5% | |
top 11% | |
border-radius 65% 47% 0 50%/70% 39% 0 44% | |
&--right | |
width 54% | |
height 100% | |
right 4% | |
top 10% | |
overflow hidden | |
border-radius 45% 80% 0 50%/72% 77% 0 44% | |
&:before | |
content '' | |
right 0 | |
height 100% | |
width 32% | |
bottom 0 | |
background var(--dark-belly) | |
z-index 2 | |
&:after | |
content '' | |
right 16% | |
height 100% | |
width 32% | |
bottom 36% | |
background var(--belly) | |
z-index 3 | |
border-radius 0 0 75% 0 / 0 0 36% 0 | |
&__eye | |
height calc(2 * var(--unit)) | |
width 15% | |
background black | |
top 33% | |
z-index 5 | |
&--left | |
left 21% | |
&--right | |
right 25% | |
&__mouth | |
height calc(2 * var(--unit)) | |
width 30% | |
background black | |
top 52% | |
left 48% | |
transform translate(-50%, 0) | |
&__tooth | |
background black | |
height 235% | |
width 20% | |
bottom 100% | |
$clip = polygon(0 100%, 50% 0, 100% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:after | |
content '' | |
background var(--claws) | |
height 100% | |
width 100% | |
$clip = polygon(0 100%, 50% 0, 100% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
transform-origin bottom center | |
transform scale(0.65) | |
&--left | |
left 0 | |
&--right | |
right 0 | |
&__head | |
height 30% | |
width 45% | |
left 50% | |
top 5% | |
transform translate(-50%, 0) | |
&__head-outline | |
background var(--body) | |
height 100% | |
width 100% | |
border calc(2 * var(--unit)) solid black | |
border-radius 75% 75% 25% 25% / 110% 110% 0% 0% | |
overflow hidden | |
&:after | |
content '' | |
right -5% | |
height 110% | |
width 15% | |
border-radius 50% / 50% | |
top -5% | |
background var(--dark-body) | |
&__ear | |
height 64% | |
border calc(2 * var(--unit)) solid black | |
background var(--body) | |
top -14% | |
width 35% | |
position absolute | |
overflow hidden | |
border-radius 15% 85% 0 10% / 20% 100% 0 80% | |
$clip = polygon(0 0, 100% 0, 100% 18%, 0 90%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:before | |
content '' | |
top 0 | |
left 0 | |
background var(--body) | |
position absolute | |
z-index 2 | |
height 100% | |
width 15% | |
border-radius 28% | |
transform-origin top center | |
transform rotate(-67deg) translate(11%, 23%) | |
&--left | |
left 4% | |
&--right | |
right 4% | |
top -15% | |
transform rotateY(180deg) | |
&:after | |
content '' | |
left -10% | |
width 25% | |
background var(--dark-body) | |
height 100% | |
top -10% | |
border-radius 50% / 50% | |
&__belly | |
position absolute | |
height 50% | |
width 82% | |
left 50% | |
top 0 | |
transform translate(-49%, 0%) | |
&:after | |
content '' | |
position absolute | |
width 58% | |
height 50% | |
border-top calc(10 * var(--unit)) solid var(--belly) | |
top 90% | |
left 50% | |
clip-path polygon(5% 0, 79% 0, 90% 100%, 5% 100%) | |
transform translate(-50%, -26%) | |
z-index 3 | |
border-radius 50% 50% 0 0/50% 50% 50% 50% | |
&__belly-segment | |
&--one | |
height 83% | |
width 100% | |
bottom 0% | |
left 0% | |
// border calc(2 * var(--unit)) solid black | |
background var(--belly) | |
transform-origin 0 100% | |
transform translate(6.5%, 13%) rotate(-20deg) | |
border-radius 40% 55% 0 17% / 60% 100% 0% 40% | |
$clip = polygon(0 0, 75% 0, 75% 100%, 0 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
z-index 2 | |
&:before | |
content '' | |
position absolute | |
top 100% | |
background var(--belly) | |
left 50% | |
height 80% | |
width 80% | |
border-radius 10% | |
transform translate(-50%, -81%) rotate(10deg) | |
&--two | |
height 90% | |
width 100% | |
bottom 0% | |
right 0% | |
transform-origin 100% 100% | |
background var(--dark-belly) | |
transform translate(-7%, 14%) rotate(20deg) | |
border-radius 0% 34% 34% 0 / 0% 60% 40% 0% | |
$clip = polygon(30% 0, 100% 0, 100% 150%, 30% 150%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:after | |
content '' | |
position absolute | |
right 10% | |
top -4% | |
width 100% | |
height 102% | |
transform-origin right bottom | |
transform rotate(-2deg) | |
background var(--belly) | |
z-index 3 | |
border-radius 0 14% 19% 0/0 50% 50% 0 | |
&:before | |
content '' | |
background var(--belly) | |
position absolute | |
z-index 2 | |
height 50% | |
width 50% | |
bottom 0 | |
left 50% | |
transform translate(-50%, 31%) rotate(-20deg) | |
&__arm-left | |
height 85% | |
width 24% | |
left 12% | |
top 14% | |
transform rotate(-21deg) | |
&__claws--left | |
background black | |
top -4% | |
width 60% | |
height 10% | |
left 48% | |
$clip = polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
transform translate(-50%, 0) | |
&:after | |
content '' | |
width 100% | |
height 100% | |
$clip = polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
transform-origin bottom center | |
background white | |
transform scaleY(0.8) scaleX(0.95) | |
&__arm-left-arm | |
background var(--body) | |
height 68% | |
width 100% | |
top 0 | |
left 0 | |
border-radius 44% 54% 50% 50%/50% 60% 40% 50% | |
transform-origin 50% 60% | |
transform rotate(0deg) | |
overflow hidden | |
border calc(2 * var(--unit)) solid black | |
// animation wave 5s infinite ease | |
&:after | |
content '' | |
right 0 | |
width 50% | |
background var(--dark-body) | |
height 120% | |
top 50% | |
transform translate(56%, -50%) rotate(-15deg) | |
border-radius 50% | |
$clip = inset(0 50% 0 0) | |
-webkit-clip-path $clip | |
clip-path $clip | |
animation fade 6s infinite linear | |
@keyframes fade | |
0%, 100% | |
opacity 1 | |
50% | |
opacity 0 | |
&__arm-wrapper | |
animation wave 6s infinite ease | |
height 100% | |
width 100% | |
transform-origin 56% 41% | |
@keyframes wave | |
0, 100% | |
transform rotate(0deg) | |
50% | |
transform rotate(-100deg) | |
&__arm-right | |
height 50% | |
width 17% | |
right 7% | |
top 28% | |
transform rotate(-39deg) | |
&__claw | |
bottom 0 | |
width 15% | |
height 9% | |
background black | |
transform translate(109%, 19%) rotate(45deg) | |
$clip = polygon(0 0, 100% 0, 50% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:after | |
content '' | |
$clip = polygon(0 0, 100% 0, 50% 100%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
height 100% | |
width 100% | |
background white | |
transform scale(0.5) | |
&__arm-right-arm | |
height 100% | |
width 100% | |
border-radius 25% 75% 65% 35%/56% 60% 40% 30% | |
background var(--dark-body) | |
overflow hidden | |
border calc(2 * var(--unit)) solid #000 | |
&:after | |
content '' | |
height 100% | |
width 130% | |
border-radius 50% | |
background var(--body) | |
bottom 8% | |
left -9% | |
&__claws--right | |
bottom -6% | |
left 25% | |
height 22% | |
width 57% | |
background black | |
$clip = polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:after | |
height 100% | |
width 100% | |
content '' | |
background white | |
$clip = polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0) | |
-webkit-clip-path $clip | |
clip-path $clip | |
transform-origin top center | |
transform scaleY(0.85) scaleX(0.85) | |
&__left-foot | |
height 34% | |
width 29% | |
bottom 0 | |
left 2.5% | |
&__left-foot-foot | |
height 100% | |
width 100% | |
top 0 | |
left 0 | |
background var(--belly) | |
border-radius 60% 40% 55% 40%/60% 45% 55% 40% | |
border calc(2 * (var(--unit))) solid black | |
overflow hidden | |
&:after | |
&:before | |
content '' | |
&:after | |
border calc(2 * var(--unit)) solid black | |
height 38% | |
width 49% | |
border-radius 50% | |
background var(--foot) | |
left 38% | |
bottom 11% | |
transform rotate(-36deg) | |
&:before | |
background var(--dark-belly) | |
height 73% | |
width 100% | |
left 32% | |
bottom 0 | |
transform-origin left center | |
border-radius 61% 20% 20% 37%/73% 50% 50% 50% | |
transform rotate(10deg) | |
&__foot-claw | |
top 50% | |
left 50% | |
width 20% | |
height 30% | |
&:after | |
content '' | |
background var(--claws) | |
bottom 12% | |
height 35% | |
width 67% | |
left 15% | |
border-radius 50% | |
&:before | |
content '' | |
bottom 2% | |
left 0 | |
width 100% | |
height 56% | |
border-radius 50% | |
background var(--claws) | |
border calc(3 * var(--unit)) solid black | |
& > div | |
width 100% | |
height 66% | |
top 0 | |
left 0 | |
background black | |
$clip = 'polygon(0 100%, %s 0, 100% 100%)' % calc(var(--clip-point) * 1%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&:after | |
content '' | |
height 100% | |
width 100% | |
background var(--claws) | |
bottom 0 | |
left 0 | |
transform-origin bottom center | |
transform scale(0.7) | |
$clip = 'polygon(0 100%, %s 0, 100% 100%)' % calc(var(--clip-point) * 1%) | |
-webkit-clip-path $clip | |
clip-path $clip | |
&--one | |
--clip-point 65 | |
left -5% | |
top 52% | |
transform rotate(-90deg) | |
width 15% | |
height 23% | |
&--two | |
--clip-point 50 | |
top 9% | |
left 3% | |
height 26% | |
transform rotate(-45deg) | |
&--three | |
--clip-point 20 | |
top -10% | |
left 34% | |
width 21% | |
height 25% | |
&--four | |
--clip-point 20 | |
top -18% | |
left 49% | |
width 21% | |
height 34% | |
transform rotate(45deg) | |
&--five | |
--clip-point 50 | |
top 0% | |
left 78% | |
width 21% | |
height 31% | |
transform rotate(40deg) | |
&--six | |
--clip-point 50 | |
top 37% | |
left 95% | |
width 19% | |
height 27% | |
transform rotate(90deg) | |
&__right-foot | |
bottom 0 | |
right 6.5% | |
width 28% | |
height 35% | |
&__right-foot-foot | |
height 100% | |
width 100% | |
border calc(2 * var(--unit)) solid black | |
background var(--belly) | |
overflow hidden | |
border-radius 50% 50% 50% 50% / 50% 45% 55% 50% | |
&:before | |
&:after | |
content '' | |
bottom 0 | |
&:before | |
left 5% | |
border-radius 50% | |
height 62% | |
width 77% | |
background var(--dark-belly) | |
&:after | |
left 10% | |
border-radius 50% | |
border calc(2 * var(--unit)) solid #000 | |
bottom 14% | |
height 42% | |
background var(--foot) | |
width 55% |