I'm trying to create a profile picture where you can change the color of your hoodie.
Image 1 - Overflow: None
Picture 2 -overflow:hidden
However, when I want to hide the overflow so that it fits the circle, it clips the svg mask in the wrong place.
Are there other ways to do this, or maybe anyone more experienced can let me know where I'm going wrong?
.memoji-wrap { width: 80px; height: 80px; background: #f6f6f6; border-radius: 50%; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; } #memoji-container { position: relative; width: 60px; left: 3px; top: 5px; } #product-svg { position: relative; z-index: 2; mix-blend-mode: multiply; } #product-shape { fill: #dbed64; } #background-image { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
<div class="memoji-wrap"> <div id="memoji-container"> <svg id="product-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.67 125.67" > <path id="product-shape" class="cls-1" d="m.2,125.5l.39-8.68.35-10.82.32-7.02s.32-2.74.74-4.04,1.51-3.72,1.51-3.72l3.16-3.65v-.35l-.67-.74.49-1.51s1.9-2.67,2.04-3.51.63-2.18.63-2.18l1.72-2.14,3.27-2.11,4.39-2.18,2.07-.56,2.56.77.18.25v3.41s7.76,7.83,9.55,8.78,3.23,1.05,3.23,1.05c0,0,3.27-.18,4.14-.84s.95-1.93.95-1.93c0,0,.46-2.04.49-2.6s.35-2.63.35-2.63l.28-2.21v-2.56s-.42.25-.74-.21.32-.91.32-.91c0,0,7.99-3.67,9.95-6.95,0,0,1.01-.14,1.12,0s0,1.4,0,1.4c0,0,5.57-.64,6.59-.44,0,0,4.17,1.46,5.34,2.6s15.17,13.92,15.17,13.92c0,0-1.63-16.16-.38-17.01s1.55-1.55,1.55-1.55v-8.31s.23-.29.47-.29h13.22s.58,7.67,1.05,7.79,2.28,1.98,2.92,3.38,1.17,4.11,1.17,4.11l1.34,8.87.38,6.62s.96,13.25.93,14.59-.5,4.81-.73,5.16-1.6,4.43-4.49,6.24-7.96,1.23-7.96,1.23c0,0-4.46-1.49-5.72-2.28s-13.19-11.03-13.19-11.03c0,0-4.35-4.03-5.34-4.73s-1.05-.96-1.05-.96c0,0-.76-.12-1.11.12s-.79.7-.79.7l-.15,4.35s.82,6.94.99,7.5,1.02,10.18.9,10.47.61,7.53.61,7.53l-64.53-.17Z" /> </svg> <img id="background-image" src="img/IMG_Mem.png" alt="" /> </div> </div>
Please view the attached pictures.
Thanks
I think I found the solution:
Clip path: Circle(50%);