@@ -12,7 +12,17 @@ const leftEye = ref<SVGElement>()
12
12
const rightEye = ref <SVGElement >()
13
13
const mouth = ref <SVGElement >()
14
14
15
- const refs = [bigBottomCircle , smallBottomCircle , bigTopCircle , head , arms , legs , leftEye , rightEye , mouth ]
15
+ const refs = [
16
+ bigBottomCircle ,
17
+ smallBottomCircle ,
18
+ bigTopCircle ,
19
+ head ,
20
+ arms ,
21
+ legs ,
22
+ leftEye ,
23
+ rightEye ,
24
+ mouth ,
25
+ ]
16
26
17
27
refs .forEach ((ref , index ) => {
18
28
const { variant } = useMotion (ref , {
@@ -49,16 +59,29 @@ refs.forEach((ref, index) => {
49
59
50
60
<template >
51
61
<div class =" person" >
52
- <svg height =" 420px" viewBox =" 0 0 600 550" fill =" none" xmlns =" http://www.w3.org/2000/svg" >
53
- <mask id =" mask0" mask-type =" alpha" maskUnits =" userSpaceOnUse" x =" 202" y =" 173" width =" 198" height =" 137" >
62
+ <svg
63
+ height =" 420px"
64
+ viewBox =" 0 0 600 550"
65
+ fill =" none"
66
+ xmlns =" http://www.w3.org/2000/svg"
67
+ >
68
+ <mask
69
+ id =" mask0"
70
+ mask-type =" alpha"
71
+ maskUnits =" userSpaceOnUse"
72
+ x =" 202"
73
+ y =" 173"
74
+ width =" 198"
75
+ height =" 137"
76
+ >
54
77
<path
55
78
fill-rule =" evenodd"
56
79
clip-rule =" evenodd"
57
80
d =" M219.33 205.236C203.262 223.476 196.064 249.629 208.22 270.19C217.504 285.894 235.588 295.832 254.093 301.953C282.194 311.249 313.964 313.262 341.957 303.703C369.949 294.143 393.3 271.987 398.45 245.355C402.496 224.429 399.181 198.945 369.841 183.696C347.282 171.972 257.56 161.837 219.33 205.236Z"
58
81
fill =" white"
59
82
/>
60
83
</mask >
61
- <g ref =" bigTopCircle" mask =" url(#mask0)" >
84
+ <g ref =" bigTopCircle" mask =" url(#mask0)" style = " opacity : 0 " >
62
85
<path
63
86
fill-rule =" evenodd"
64
87
clip-rule =" evenodd"
@@ -158,15 +181,24 @@ refs.forEach((ref, index) => {
158
181
fill =" white"
159
182
/>
160
183
</g >
161
- <mask id =" mask1" mask-type =" alpha" maskUnits =" userSpaceOnUse" x =" 244" y =" 309" width =" 126" height =" 80" >
184
+ <mask
185
+ id =" mask1"
186
+ mask-type =" alpha"
187
+ maskUnits =" userSpaceOnUse"
188
+ x =" 244"
189
+ y =" 309"
190
+ width =" 126"
191
+ height =" 80"
192
+ style =" opacity : 0 "
193
+ >
162
194
<path
163
195
fill-rule =" evenodd"
164
196
clip-rule =" evenodd"
165
197
d =" M247.518 331.52C241.174 343.915 244.285 359.835 253.288 370.478C262.292 381.12 276.271 386.808 290.219 387.865C304.166 388.922 318.134 385.738 331.299 381.037C341.487 377.399 351.587 372.676 359.135 364.961C366.682 357.245 371.309 346.032 368.838 335.554C362.97 310.672 332.255 309.037 311.694 309.982C289.198 311.015 259.81 307.506 247.518 331.52Z"
166
198
fill =" white"
167
199
/>
168
200
</mask >
169
- <g ref =" smallBottomCircle" mask =" url(#mask1)" >
201
+ <g ref =" smallBottomCircle" mask =" url(#mask1)" style = " opacity : 0 " >
170
202
<path
171
203
fill-rule =" evenodd"
172
204
clip-rule =" evenodd"
@@ -228,21 +260,31 @@ refs.forEach((ref, index) => {
228
260
clip-rule =" evenodd"
229
261
d="M440.919 341.115C466.576 346.42 482.198 363.856 487.438 396.256C490.132 412.916 483.074 426.317 467.799 436.472C454.946 445.017 436.526 451.128 413.876 455.102C395.632 458.302 375.36 459.979 355.25 460.338L353.443 460.367C339.025 460.563 325.71 460.015 320.653 459.202C319.695 459.048 318.727 459.415 318.079 460.183L318 460.282L309.964 470.658C306.939 474.565 300.843 472.56 300.527 467.695L300.519 467.546L300.5 467.068L300.481 467.546C300.283 472.469 294.215 474.562 291.129 470.775L291.036 470.658L283 460.282C282.354 459.447 281.345 459.042 280.347 459.202L279.849 459.277C274.225 460.081 260.398 460.6 245.75 460.338C225.64 459.979 205.368 458.302 187.124 455.102C164.474 451.128 146.054 445.017 133.201 436.472C117.926 426.317 110.868 412.916 113.562 396.256C118.802 363.856 134.424 346.42 160.081 341.115C171.029 338.851 183.772 338.778 198.818 340.625L199.473 340.707C212.292 342.32 226.343 345.211 244.65 349.77C245.723 350.037 246.375 351.12 246.107 352.188C245.838 353.256 244.751 353.906 243.678 353.638L241.652 353.137C224.471 348.902 211.127 346.193 198.971 344.663C184.043 342.783 171.512 342.824 160.896 345.019C136.921 349.977 122.5 366.072 117.516 396.89C115.091 411.888 121.371 423.813 135.425 433.156C147.733 441.339 165.667 447.289 187.819 451.174C205.504 454.277 225.164 455.933 244.715 456.33L246.714 456.366C261.262 456.595 274.828 456.05 279.709 455.265C282.112 454.879 284.522 455.817 286.065 457.713L286.172 457.847L294.208 468.223C294.932 469.159 296.36 468.705 296.473 467.474L296.479 467.386L297.764 435.516C297.85 433.374 296.361 431.522 294.741 431.559C275.169 431.999 257.145 428.366 235.892 420.565L234.401 420.013C228.897 417.959 223.204 415.653 216.128 412.648L213.045 411.33C209.075 409.619 196.254 404.071 192.057 402.293L190.359 401.577C190.311 401.559 190.264 401.539 190.218 401.518L189.921 401.392C185.238 399.424 180.959 397.679 176.75 396.03C175.721 395.627 175.215 394.47 175.62 393.445C176.025 392.42 177.187 391.916 178.216 392.319C180.93 393.382 183.672 394.485 186.529 395.659L183.068 389.437C182.533 388.474 182.883 387.26 183.85 386.727C184.786 386.211 185.958 386.52 186.518 387.414L186.572 387.505L192.49 398.147L195.13 399.265C200.955 401.754 213.803 407.316 215.598 408.084L217.695 408.978C225.064 412.108 230.911 414.469 236.601 416.574C257.713 424.386 275.431 428.004 294.65 427.572C297.115 427.517 299.23 428.886 300.5 430.907C301.77 428.886 303.885 427.517 306.35 427.572C325.57 428.004 343.289 424.386 364.402 416.573L365.596 416.129C370.914 414.135 376.453 411.889 383.307 408.977L386.121 407.775C389.759 406.208 403.069 400.448 407.375 398.624L408.512 398.143L414.429 387.505C414.965 386.542 416.183 386.194 417.151 386.727C418.087 387.244 418.445 388.397 417.981 389.343L417.932 389.437L414.472 395.659C417.329 394.485 420.07 393.382 422.784 392.319C423.813 391.916 424.975 392.42 425.38 393.445C425.785 394.47 425.279 395.627 424.25 396.03L422.985 396.528C419.096 398.064 415.12 399.692 410.796 401.511C410.736 401.54 410.676 401.565 410.614 401.588C410.534 401.621 410.454 401.655 410.373 401.689L407.249 403.015C401.352 405.537 388.772 410.982 386.985 411.747L385.394 412.426C377.728 415.688 371.687 418.131 365.797 420.311C344.244 428.287 326.042 432.003 306.259 431.559C304.671 431.523 303.21 433.301 303.233 435.388L303.237 435.516L304.521 467.387C304.572 468.654 305.984 469.158 306.741 468.286L306.792 468.223L314.829 457.846C316.367 455.861 318.833 454.87 321.291 455.265C326.172 456.05 339.739 456.595 354.287 456.366L355.178 456.351C375.093 455.995 395.163 454.335 413.182 451.174C435.333 447.289 453.267 441.339 465.575 433.156C479.629 423.813 485.909 411.888 483.484 396.89C478.5 366.072 464.079 349.977 440.105 345.019C429.488 342.824 416.957 342.783 402.029 344.663L401.08 344.784C388.701 346.397 375.034 349.228 357.322 353.638C356.249 353.906 355.162 353.256 354.893 352.188C354.625 351.12 355.277 350.037 356.35 349.77L358.392 349.264C375.485 345.051 388.838 342.331 401.046 340.768L401.527 340.707C416.859 338.776 429.813 338.818 440.919 341.115Z"
230
262
fill =" #333"
263
+ style =" opacity : 0 "
231
264
/>
232
265
<path
233
266
ref =" legs"
234
267
d="M231.251 188.307C231.622 189.307 231.137 190.414 230.163 190.829L229.79 190.976L229.423 191.128C229.166 191.236 228.879 191.362 228.56 191.506C227.269 192.091 225.763 192.842 224.06 193.777C219.162 196.467 213.688 200.083 207.782 204.752C190.84 218.146 173.87 237.298 158.007 263.244C148.588 278.651 167.144 298.931 216.583 322.806C216.72 322.857 216.854 322.913 216.988 322.974L217.139 323.044L221.425 325.109C222.574 325.648 223.738 326.188 224.918 326.73C225.922 327.191 226.36 328.375 225.896 329.374C225.432 330.373 224.243 330.809 223.239 330.347C222.042 329.797 220.86 329.249 219.693 328.701L219.69 328.7L219.674 328.693C218.099 327.954 216.552 327.218 215.032 326.485C213.654 326.027 212.114 326.627 211.43 327.946C210.678 329.396 211.241 331.171 212.674 331.936L212.777 331.989L221.904 336.419C226.212 338.509 231.41 336.877 233.731 332.705C237.985 325.058 236.572 315.536 230.309 309.439L230.118 309.255L191.454 272.616C190.66 271.863 190.626 270.621 191.359 269.827L191.438 269.747L230.979 231.398C231.77 230.63 233.038 230.647 233.81 231.434C234.556 232.196 234.565 233.4 233.85 234.173L233.773 234.251L195.72 271.156L232.879 306.37C240.546 313.635 242.377 325.093 237.387 334.355L237.234 334.635C233.914 340.601 226.521 342.972 220.336 340.088L220.149 339.999L211.022 335.569C207.494 333.856 206.071 329.591 207.871 326.119C208.336 325.222 208.971 324.467 209.717 323.874C162.004 300.022 143.723 278.942 154.587 261.173C170.694 234.826 187.979 215.319 205.291 201.632C211.374 196.823 217.033 193.085 222.126 190.289L222.833 189.905C224.226 189.157 225.492 188.527 226.623 188.007L227.209 187.742C227.895 187.437 228.389 187.236 228.678 187.13C229.715 186.748 230.867 187.275 231.251 188.307ZM372.823 187.13L373.037 187.211C373.359 187.338 373.83 187.535 374.442 187.809L374.598 187.879C375.983 188.506 377.582 189.304 379.376 190.289C384.468 193.085 390.127 196.823 396.21 201.632C413.522 215.319 430.807 234.826 446.915 261.173C457.777 278.942 439.496 300.022 391.785 323.874C392.53 324.467 393.164 325.222 393.629 326.119C395.405 329.542 394.046 333.738 390.624 335.497L390.479 335.569L381.352 339.999C375.13 343.02 367.62 340.662 364.267 334.635C359.14 325.418 360.842 313.941 368.391 306.591L368.622 306.37L405.781 271.156L367.728 234.251C366.962 233.509 366.922 232.306 367.617 231.515L367.691 231.434C368.437 230.673 369.647 230.632 370.442 231.324L370.523 231.398L410.064 269.747C410.849 270.509 410.868 271.751 410.126 272.536L410.047 272.616L371.383 309.255C364.958 315.344 363.473 324.981 367.77 332.705C370.063 336.826 375.163 338.469 379.438 336.493L379.596 336.419L388.723 331.989C390.233 331.256 390.841 329.431 390.071 327.946C389.387 326.626 387.846 326.026 386.466 326.485C384.948 327.218 383.402 327.954 381.828 328.692L381.81 328.7C380.641 329.249 379.459 329.797 378.262 330.347C377.258 330.809 376.068 330.373 375.605 329.374C375.141 328.375 375.579 327.191 376.583 326.73C377.77 326.185 378.941 325.641 380.097 325.099L384.362 323.044C384.544 322.957 384.728 322.878 384.913 322.807C434.356 298.932 452.913 278.652 443.494 263.244C427.631 237.298 410.661 218.146 393.719 204.752C387.813 200.083 382.34 196.467 377.441 193.777C375.852 192.905 374.434 192.192 373.202 191.625L372.941 191.506C372.559 191.333 372.221 191.187 371.929 191.065L371.459 190.876L371.434 190.867C370.397 190.485 369.867 189.339 370.25 188.307C370.634 187.275 371.786 186.748 372.823 187.13Z"
235
268
fill =" #333"
269
+ style =" opacity : 0 "
236
270
/>
237
- <mask id =" mask2" mask-type =" alpha" maskUnits =" userSpaceOnUse" x =" 253" y =" 77" width =" 95" height =" 88" >
271
+ <mask
272
+ id =" mask2"
273
+ mask-type =" alpha"
274
+ maskUnits =" userSpaceOnUse"
275
+ x =" 253"
276
+ y =" 77"
277
+ width =" 95"
278
+ height =" 88"
279
+ >
238
280
<path
239
281
fill-rule =" evenodd"
240
282
clip-rule =" evenodd"
241
283
d =" M273.282 88.4443C297.425 72.6453 308.947 73.7349 326.506 88.4443C344.064 103.154 361.074 126.58 332.542 148.372C304.009 170.163 290.84 168.529 268.343 148.372C245.847 128.214 249.139 104.243 273.282 88.4443Z"
242
284
fill =" white"
243
285
/>
244
286
</mask >
245
- <g ref =" head" mask =" url(#mask2)" >
287
+ <g ref =" head" mask =" url(#mask2)" style = " opacity : 0 " >
246
288
<path
247
289
fill-rule =" evenodd"
248
290
clip-rule =" evenodd"
@@ -296,16 +338,19 @@ refs.forEach((ref, index) => {
296
338
clip-rule =" evenodd"
297
339
d =" M308.685 128.97L308.622 129.008C307.364 129.757 306.138 130.344 304.867 130.731C303.598 131.121 302.301 131.315 301.001 131.319C299.7 131.317 298.402 131.121 297.136 130.73C295.864 130.343 294.638 129.754 293.382 129.002L293.319 128.963C292.889 128.707 292.332 128.693 291.879 128.975C291.238 129.372 291.045 130.208 291.449 130.841C292.414 132.356 293.867 133.599 295.537 134.444C297.209 135.289 299.104 135.734 300.999 135.736C302.895 135.739 304.791 135.294 306.465 134.45C308.135 133.607 309.589 132.366 310.554 130.847C310.819 130.429 310.843 129.88 310.567 129.428C310.176 128.789 309.333 128.583 308.685 128.97Z"
298
340
fill =" #000"
341
+ style =" opacity : 0 "
299
342
/>
300
343
<path
301
344
ref =" rightEye"
302
345
d =" M313.533 116.771C315.13 117.036 316.879 116.224 317.608 114.788C319.219 111.612 315.507 108.857 312.566 110.201C309.478 111.613 310.224 116.223 313.533 116.771Z"
303
346
fill =" #000"
347
+ style =" opacity : 0 "
304
348
/>
305
349
<path
306
350
ref =" leftEye"
307
351
d =" M288.193 116.771C286.596 117.036 284.847 116.224 284.118 114.788C282.506 111.612 286.219 108.857 289.16 110.201C292.248 111.613 291.502 116.223 288.193 116.771Z"
308
352
fill =" #000"
353
+ style =" opacity : 0 "
309
354
/>
310
355
</svg >
311
356
</div >
0 commit comments