Clip-path 2

by Simon Hi

HTML

<div>
  <img title="Peau" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png">
  <div></div>
  <img title="Chair" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png">
  <div></div>
  <img title="Noyau" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png">
  <div></div>
</div>

CSS

div {
  position: relative;
}

img {
  position: absolute;
  width: 300px;
  height: 322px;
  cursor: crosshair;
}

img:nth-of-type(1),
div>div:nth-of-type(1) {
  clip-path: path('M 50,85 C 46,88 50,94 49,99 49,102 46,105 46,108 45,112 46,115 46,118 46,123 45,128 46,133 46,136 48,140 49,144 50,148 52,152 53,155 55,161 56,167 58,173 64,187 71,200 79,212 88,224 98,236 110,245 124,256 141,265 159,270 171,273 184,274 196,272 207,270 218,265 227,259 233,254 242,249 241,241 237,169 146,129 84,93 78,89 71,88 65,87 60,86 54,82 50,85 Z');
}

img:nth-of-type(2),
div>div:nth-of-type(2) {
  clip-path: path('M 100,45 C 97,46 95,50 94,53 91,58 90,63 89,67 88,73 87,79 87,84 86,89 86,94 86,98 85,107 85,116 86,125 87,134 90,143 93,152 96,163 99,176 106,186 110,192 117,195 123,200 133,207 144,215 155,221 167,228 179,236 192,241 202,244 213,248 223,247 230,246 238,243 243,238 246,235 246,231 247,227 249,220 251,214 251,208 250,197 246,186 242,176 238,168 233,160 228,152 212,130 194,111 174,93 166,86 157,81 148,75 144,72 140,68 135,66 133,65 131,67 129,66 122,63 120,54 114,50 110,47 105,44 100,45 Z');
}

img:nth-of-type(3),
div>div:nth-of-type(3) {
  clip-path: path('M 183,100 C 180,101 177,103 175,105 171,108 169,113 166,117 164,122 162,126 160,131 158,134 157,137 156,141 155,146 155,151 155,156 154,159 153,163 154,166 155,170 159,173 161,176 164,179 166,181 169,183 172,186 176,186 179,188 183,191 186,194 189,196 192,197 195,197 198,198 202,198 206,198 209,197 213,195 217,192 220,189 222,186 224,182 226,178 228,173 228,167 228,161 228,156 227,151 225,146 224,142 223,139 221,136 220,132 218,129 217,126 215,123 213,121 211,118 209,116 207,113 205,111 203,109 200,108 198,106 195,104 193,102 190,101 189,100 188,100 187,100 186,100 184,99 183,100 Z');
}

div>div:nth-of-type(1) {background: #00f7;}
div>div:nth-of-type(2) {background: #0f07;}
div>div:nth-of-type(3) {background: #f007;}

div>div {
  position: absolute;
  width: 300px;
  height: 322px;
  pointer-events: none;
}