Goofing around with clip path
I wanted to try to do something fancy with clip-path
from scratch today, but it ended up being quite goofy. Click on me to get a high-five!
View the code:
HTML and JS
<div class="code-block">
<div class="me-container">
<a><span class="clipped"></span></a>
</div>
</div>
CSS
.code-block {
margin: 1rem auto;
max-width: 30em;
}
.hidden {
display: none;
}
.me-container {
width: 360px;
height: 360px;
max-width: 360px;
clip-path: circle(49% at center center);
overflow: hidden;
background-image: linear-gradient(orange, red);
transition: transform .1s ease-out, clip-path .1s ease-out, border .1s ease-out;
}
.me-container:hover {
cursor: pointer;
}
.me-container:active {
background-image: linear-gradient(rgb(255, 173, 22), rgb(255, 20, 20));
}
.me-container:active .clipped {
transform: scale(1.25) translateY(2.5rem) translateX(4.5rem) rotate(5deg);
}
.clipped {
display: block;
background-color: #ffffffcc;
background-image: url('https://jeremycaudle.com/ygg/resources/onebitme.png');
width: 480px;
height: 398px;
transform: rotate(15deg);
clip-path: path('M480.667,308.167c0,0-2.334,0.333-3.334-2c-1-2.334-8-15.667-18.333-19.334c-12.333-7.333-31.333-13.333-34.333-16.666c-3-3.334-17.334-8.334-19.667-11.334s-5.667-8.333-6.333-9.666c-0.667-1.334-3.667-9-8.667-10.667s-7.667-0.667-10-8.667s-5.333-18.666,4.667-28.333c6.333-3,7.333-5.334,11.666-10.667c4.334-5.333,7-5.333,7.334-20c0.333-14.667,0.666-29,3-34c2.333-5,2-9-0.667-19s-9.333-49.333-13.333-48.667c-4,0.667-7.667-54.333-95-66.333C264.667-0.167,238,36.5,238,36.5s-16,18.333-21.333,35c-5.333,16.667-7.667,30.667-5,48.333c2.667,17.667,3.333,30,5.333,36.333c2,6.333,13,39.333,14,41c1,1.667,1.333,3.334,3.667,4.334c0.667,0.333,3,20.667,10,31c3.333,7.667,4.333,10,3,13.667c-1.334,3.666,0.333,6.333-1.334,8.333c-1.666,2-10,5-21,13s-8,1.333-9.667,3c-1.667,1.667-0.333,5.333-6,2C204,269.167,205,265.167,197,268.167s-17,4-23.333,5.333c-6.333,1.333-14,5.333-20.667,5s-8.667-0.333-15,3.333c-6.333,3.667-8.667,3-11.333,2.667c-2.667-0.333-2.667,0-1,2.333c1.667,2.334,1.333,21-2.667,26c-0.333,0,0-0.333-5.667,3.334C109,318.833,104.667,317.833,101,321.5s-2,5.667-8.333,9.333c-6.333,3.667-9,4-12.667,5.667s-7,3.667-9.667,3.667c-2.667,0-5-4-6.667-1.667c-1.667,2.333-2.667,5-5.333,6c-2.667,1-10.667,0.333-10.667,0.333c-4.333,2.334-11,5.667-12,4.334c-1-1.334,3-5.334,2.333-7.334s0.667-2,2.667-5s3.667-4.666,7-8.333c3.333-3.667,5-2.667,7.333-8s5.667-16.667,5.667-16.667c1.667-3.333,0,0,4-6.666C68.667,290.5,75,282.5,71,266.833c-0.333,0-5.333-4.666-2-9c3.333-4.333,3.667-6,9.667-8s7.667-4.666,11.667-6c4-1.333,21-10.666,24.667-13c3.667-2.333,6.667-4.333,10-6c3.333-1.666,8-3.666,8-3.666s7.333-2.334,8.333-7.667c1-4.667,0.333-9.667,5-16.666c4.667-7,14-22,17.667-27.334c3.333-7.333,9.667-20,13.333-24.667c3.667-4.667,10-10.667,5.667-14.667s-24.667,5.333-34,15.333c-8.667,9-15.333,20.667-15.333,20.667s-5.667,10-4.667,1c3.333-7,6.667-8.333,8.333-12.667c1.667-4.333,1.333-14.667,3.667-19.333c2.333-4.667,9-13.667,13.333-24.333c4.333-10.667,6.667-28.667,9.333-32.667c2.667-4,14-32.667,1-35c-11.667-3.667-16,12.667-16,12.667S146,70.167,144,76.167s-5,9.667-7,13c-2,3.333-3.667,7-5.667,10.667c-2,3.667-4.333,13.667-6,18.333c-1.667,4.667-6.667,13-9.667,9.667c-3-3.333-2.333,0.333,2-14C122,99.5,124.333,89.5,125.333,86.167c1-3.333,2.333-6,2.667-11.333c0.333-5.333-0.667-13,1.333-18.667c2-5.667,2-5.667,2-5.667l4-22c0,0,4.333-14.667-3.667-15s-12.333,1.667-16,16.667c-3.667,15-6,28.333-6,28.333L103,79.167c0,0-4.667,6-5,10s-4.333,19-6.333,22.333s-1.667,3.333-4,1.333c-2.333-2-0.667-3,0-4.333c0.667-1.333,3.667-2.333,4.667-5.333s1.333-4.667-0.667-6c-2-1.333,1-5.333,1-5.333s1.667-5,1.667-8S95.667,72.5,98,64.5s5.667-21.667,5.667-21.667s8-20.667-2.667-20.667s-10,11-12,16s-8.333,24.667-8.333,24.667s-3,5-3.667,8.333c-0.667,3.333-5,19-5,19s-2.667,2-3.667,4s-3,6.333-3.333,8c-0.333,1.667,3.333,5,0.333,8s-8.333,7.333-12,6.667C49.667,116.167,46,116.5,46,107.5s0.333-17,0.333-20.333c0-3.333-2.333-9.333-2.333-16c0-6.667,0.667-24.333-1.333-27c-2-2.667-2.333-4-6.667-4s-9.667,4-9.667,21.667c0,17.667-0.667,15,0.667,23.667s2.333,19,2.333,23.333c0,4.333,0.333,8.667-1,12c-1.333,3.333-2.667,9.667-3.667,13c-1,3.333-6.333,17-9,24.667c-2.667,7.667-6,17-6.333,20.333c-0.333,3.333-2.667,8-3,10C6,190.833,2.667,203.5,3,209.5s-1,11.667-1,11.667L0,224.5v166.333h479.333L480.667,308.167z');
transition: transform .125s ease-out;
}