Add Avatar component
This is an interactive jedmund avatar. It blinks once or twice randomly, and opens its mouth wide when you hover over it
This commit is contained in:
Justin Edmund
parent
54727edc36
commit
980a6395f1
1 changed files with 398 additions and 0 deletions
398
src/lib/components/Avatar.svelte
Normal file
398
src/lib/components/Avatar.svelte
Normal file
|
|
@ -0,0 +1,398 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte'
|
||||||
|
import { spring } from 'svelte/motion'
|
||||||
|
|
||||||
|
let isHovering = false
|
||||||
|
let isBlinking = false
|
||||||
|
|
||||||
|
const scale = spring(1, {
|
||||||
|
stiffness: 0.1,
|
||||||
|
damping: 0.125
|
||||||
|
})
|
||||||
|
|
||||||
|
$: isHovering ? scale.set(1.25) : scale.set(1)
|
||||||
|
|
||||||
|
function blink() {
|
||||||
|
isBlinking = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isBlinking = false
|
||||||
|
if (Math.random() < 0.45) {
|
||||||
|
setTimeout(() => {
|
||||||
|
isBlinking = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isBlinking = false
|
||||||
|
}, 150)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}, 150)
|
||||||
|
}
|
||||||
|
|
||||||
|
function startBlinking() {
|
||||||
|
const blinkInterval = setInterval(() => {
|
||||||
|
if (!isHovering) {
|
||||||
|
blink()
|
||||||
|
}
|
||||||
|
}, 4000)
|
||||||
|
|
||||||
|
return () => clearInterval(blinkInterval)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
return startBlinking()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="face-container"
|
||||||
|
on:mouseenter={() => (isHovering = true)}
|
||||||
|
on:mouseleave={() => (isHovering = false)}
|
||||||
|
style="transform: scale({$scale})"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="497"
|
||||||
|
height="497"
|
||||||
|
viewBox="0 0 497 497"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<!-- Common elements -->
|
||||||
|
<!-- Skin -->
|
||||||
|
<path d="M497 0H0V497H497V0Z" fill="#FF2602" />
|
||||||
|
<path
|
||||||
|
d="M155.92 497C155.92 497 171.19 448 215.69 431C234.91 423.66 269.19 421.5 291.92 433.5C305.42 440.63 312.92 453.5 316.92 461.73C322.374 472.659 324.956 484.797 324.42 497H155.92Z"
|
||||||
|
fill="#BCBCBC"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M264.33 424.17C292.5 424.17 327.21 445.17 331.83 485.17C332.98 495.06 333.12 497.88 333.12 497.88H322.5C322.5 497.88 325.65 436.08 265 426.83C245.92 423.92 179.5 437.83 158.33 497.88H145.83C145.83 497.88 157 442 226.5 419.5C251.06 412.94 264.33 424.17 264.33 424.17Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M296 497.88C296 497.88 295.5 486.62 296.75 481.5C298 476.38 295.88 473.5 293.75 473.12C291.62 472.74 288.88 473.88 287.88 478.25C286.657 484.722 286.028 491.293 286 497.88H296Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M131.81 207.25C131.81 207.25 137.14 236.25 136.81 250.08C136.81 250.08 134.48 274.91 129.81 293.25C125.14 311.59 120.81 348.91 126.14 365.25C131.47 381.59 153.48 411.25 194.48 405.25C235.48 399.25 237.14 397.58 236.81 407.58C236.48 417.58 235.48 427.58 231.48 433.91C231.48 433.91 244.81 436.25 251.48 431.58L258.14 426.91C258.14 426.91 258.54 415.27 261.48 408.25C263.48 403.45 266.14 403.25 266.14 403.25C266.14 403.25 300.81 394.91 320.14 377.58C335.67 363.66 351.48 337.25 354.48 299.91C354.48 299.91 366.81 294.25 368.48 288.25L370.14 282.25C370.14 282.25 370.48 275.91 364.81 276.91C359.14 277.91 353.81 281.91 353.81 281.91C353.81 281.91 360.81 223.25 352.14 193.91C347.14 176.98 338.36 158.64 312.14 141.25C276.48 117.58 189.48 120.25 142.81 157.91C125.16 172.16 131.81 207.25 131.81 207.25Z"
|
||||||
|
fill="#C3915E"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M245.54 433.73C245.54 433.73 243.72 417 254 405.68C265 393.58 289 392.08 302.7 367.88C302.7 367.88 298.2 354.62 307.2 342.62C307.2 342.62 295.01 321 320.2 310.62L355.07 304.09C355.07 304.09 353.37 331.17 337.2 356.38C331.04 367.44 317.2 387.67 274.83 401.12C274.83 401.12 262.33 404.38 261.04 411.4C260.212 415.793 260.104 420.292 260.72 424.72C260.778 425.106 260.737 425.5 260.6 425.866C260.464 426.232 260.237 426.556 259.94 426.81C255.829 430.338 250.863 432.724 245.54 433.73Z"
|
||||||
|
fill="#AD723B"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Hair -->
|
||||||
|
<path
|
||||||
|
d="M135.85 261C135.85 261 147.71 253.65 150.67 246.34C162.35 252.34 181.57 252.34 184.29 246.34C187.01 240.34 184.38 235.16 180.66 232.91C184 234.1 186.25 232.1 186.66 229.54C190.35 232.54 208.22 230.42 212.53 223.16C215.72 226.66 232.41 225.44 237.35 218.85C241.47 225.66 266.28 226.79 274.35 217.16C274.35 217.16 290.69 204.05 277.2 178.33C263.71 152.61 151 155.67 135.85 183.13C120.7 210.59 118.08 236.68 135.85 261Z"
|
||||||
|
fill="#AD723B"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M113.14 341.08C113.14 341.08 97.1402 334.75 97.4702 322.08C97.4702 322.08 98.4702 310.42 106.81 309.42C106.81 309.42 86.1402 309.75 86.1402 295.75C86.1402 295.75 86.1402 283.08 97.4702 283.42C97.4702 283.42 78.4702 275.42 78.4702 261.75C78.4702 249.08 85.8102 240.75 95.8102 240.75C95.8102 240.75 80.4702 232.08 80.4702 220.08C80.4702 220.08 79.4702 209.75 85.1402 204.75C85.1402 204.75 76.1402 184.08 83.4702 167.42C83.4702 167.42 86.1402 156.75 104.14 153.75C104.14 153.75 98.1402 137.42 107.47 126.75C107.47 126.75 112.47 118.75 125.47 118.08C125.47 118.08 127.47 102.26 141.47 98.08C141.47 98.08 157.03 97.08 168.69 102.08C168.69 102.08 177.14 79.43 195.14 72.76C195.14 72.76 214.34 65.76 228.34 78.37C228.34 78.37 230.47 57.09 247.97 57.09C265.47 57.09 272.66 72.17 272.66 72.17C272.66 72.17 277.72 59.04 294.47 64.09C312.14 69.43 312.47 93.43 312.47 93.43C312.47 93.43 326.47 78.76 345.81 84.09C353.92 86.33 357.14 97.76 354.81 106.43C354.81 106.43 362.47 98.09 369.81 101.43C377.15 104.77 391.47 117.09 382.81 137.76C382.81 137.76 401.47 135.43 410.14 150.09C410.14 150.09 424.14 169.76 407.14 184.76C407.14 184.76 428.47 183.09 432.47 209.09C432.47 209.09 434.14 229.76 413.47 236.43C413.47 236.43 430.81 237.76 430.47 253.76C430.47 253.76 432.77 269.76 411.77 276.76C411.77 276.76 423.43 285.76 421.1 297.43C417.1 317.43 391.43 315.43 391.43 315.43C391.43 315.43 405.43 320.09 403.43 328.43C403.43 328.43 399.77 338.43 386.1 336.43C386.1 336.43 395.1 345.43 387.1 352.76C379.1 360.09 369.43 352.76 369.43 352.76C369.43 352.76 374.81 368.89 364.08 373.23C353.56 377.49 344.52 369.41 342.86 367.08C341.2 364.75 346.43 377.76 332.1 379.08C317.77 380.4 316.43 366.08 316.43 366.08C316.43 366.08 317.43 352.75 329.1 355.42C329.1 355.42 320.43 352.42 321.1 344.42C321.77 336.42 330.77 333.42 330.77 333.42C330.77 333.42 318.77 339.08 317.1 329.42C315.43 319.76 325.43 309.75 325.43 309.75C325.43 309.75 311.43 311.42 310.1 297.75C310.1 297.75 309.77 282.75 325.77 277.08C325.77 277.08 309.1 274.75 309.43 256.08C309.76 237.41 326.1 231.42 326.1 231.42C326.1 231.42 316.77 238.42 307.43 230.75C298.09 223.08 302.1 210.08 302.1 210.08C302.1 210.08 298.43 221.84 283.1 218.08C267.77 214.32 271.77 200.08 271.77 200.08C271.77 200.08 263.43 215.08 250.77 213.42C238.11 211.76 237.1 196.75 237.1 196.75C237.1 196.75 232.1 205.42 225.43 204.75C225.43 204.75 212.77 205.08 213.43 186.75C213.43 186.75 213.1 204.08 195.77 207.42C178.44 210.76 177.1 193.75 177.1 193.75C177.1 193.75 179.1 208.42 162.43 214.75C145.76 221.08 143.43 206.42 143.43 206.42C143.43 206.42 148.1 217.08 139.43 229.42C130.76 241.76 131.1 236.42 131.1 236.42C132.79 243.396 133.354 250.596 132.77 257.75C131.77 269.42 125.1 286.08 121.77 305.42C119.756 317.082 118.972 328.924 119.43 340.75L113.14 341.08Z"
|
||||||
|
fill="#935C0A"
|
||||||
|
style="fill:#935C0A;fill:color(display-p3 0.5765 0.3608 0.0392);fill-opacity:1;"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M331.19 339.25C335.93 337.62 335.62 334.81 333.31 333.19C331 331.57 327.13 332.56 326.19 333.94C325.25 335.32 323.05 335.05 321.75 332.81C317.63 325.7 324.31 316.12 328.69 314.69C334.69 312.69 332.38 309.25 332.38 309.25C332.01 308.647 331.462 308.174 330.812 307.895C330.162 307.616 329.442 307.544 328.75 307.69C326.94 308.12 326.12 308.88 324.75 308.88C320 308.88 315.75 304.5 315.88 298.44C316.01 292.38 321.56 283.31 326.81 282.5C332.06 281.69 331.28 278.95 331.28 278.95C331.28 278.95 331.91 276.88 326.81 275.81C317.34 273.81 314 270 313.63 258C313.26 246 318.75 238.56 324.44 237.21C333.68 235.02 332 229.31 331.38 228.62C330.828 228.254 330.156 228.114 329.503 228.232C328.851 228.349 328.27 228.714 327.88 229.25C327.19 230.5 324.1 235.15 315.04 232.08C300.68 227.23 306.94 212.08 307.94 209.38C308.94 206.68 304.88 206.94 304.88 206.94C304.88 206.94 300.5 206.62 299.81 208.62C298.94 211.17 294.44 219.81 285.69 218.06C274.85 215.9 274.81 205.94 275.12 202.56C275.43 199.18 274.81 198.88 273.12 198.88C271.43 198.88 269.69 198.81 269 201.69C266.43 212.44 251.94 212.88 251.94 212.88C238.44 212.56 239.18 196.15 239.75 191.88C240.44 186.75 240.44 186.79 239.49 186.88C238 186.97 236.38 190.28 236.38 192.41C236.481 194.484 235.981 196.543 234.94 198.34C233.75 200.34 231.25 204.65 226.31 204.47C221.37 204.29 218.75 199.47 218.69 194.59C218.63 190.34 218.88 185.59 218.88 185.59C218.81 184.28 218 182.72 216.69 183.28C215.38 183.84 214.19 184.41 212.31 185.41C211.77 185.729 211.339 186.202 211.071 186.769C210.804 187.336 210.713 187.971 210.81 188.59L211 191.97C211.06 195.47 207.89 199.66 205.62 201.72C198.75 207.97 191.7 207.91 188.27 204.41C184.84 200.91 184.19 199.34 183.27 195.47C182.74 193.28 181.27 192.72 180.46 193.03C179.65 193.34 176.71 194.65 176.71 194.65C176.437 194.798 176.198 195 176.007 195.244C175.816 195.489 175.678 195.77 175.601 196.071C175.523 196.371 175.509 196.684 175.559 196.991C175.609 197.297 175.722 197.589 175.89 197.85C176.62 199.29 174.82 202.85 174.08 203.91C171.94 207.13 165.4 213.47 160.02 214.36C154.43 215.29 151.35 209.36 149.85 206.36C148.35 203.36 145.02 204.53 142.02 206.36C139.02 208.19 139.85 210.36 139.85 210.36C141.85 216.64 139.64 224.91 137.52 228.7C132.19 238.21 125.52 235.7 123.52 235.15C121.52 234.6 120.02 236.7 122.69 239.86C125.36 243.02 132.1 241.61 132.1 241.61C132.1 241.61 126.85 272.2 122.19 289.7C117.53 307.2 114.52 329.36 114.52 340.7C114.52 352.04 116.69 382.86 145.35 399.7C174.01 416.54 199.52 413.53 208.35 412.03C208.35 412.03 221.02 409.52 226.19 406.53C226.19 406.53 228.98 404.65 229.19 408.53C229.52 414.78 227.5 426.53 222.85 433.2C222.85 433.2 218.19 440.63 240.52 440.63C249.19 440.63 254.69 439.54 264.85 432.03C264.85 432.03 266.85 431.36 266.35 426.36C265.85 421.36 265.68 410.86 266.43 407.36C266.43 407.36 304.08 399.59 322.07 381.44L322.45 374.6C316.79 366.23 326.14 359.78 327.21 360.34C328.28 360.9 328.96 361.03 331.21 360.78C333.46 360.53 333.71 359.41 333.27 358.03C332.83 356.65 330.96 355.15 327.4 353.72C323.84 352.29 327.38 340.56 331.19 339.25ZM321.08 340.19C317.65 342.62 317.33 349.33 320.4 352.52C321.34 353.52 321.28 354.52 320.4 354.77C311.92 357.03 310.87 366.54 315.81 374.85C317.46 377.62 316.56 378.27 316.56 378.27C300.31 394.02 278.19 400.5 267.62 402.56C264.52 403.17 262.38 404.44 261.15 409.1C259.63 414.86 259.23 427.27 259.23 427.27C247.23 437.27 230.31 434.69 232.31 432.19C234.31 429.69 235.31 424.93 235.31 424.93C235.31 424.93 236.54 421.26 238.25 408.38C239.44 399.44 232.82 394.82 222.53 398.5C200.6 406.33 174.98 406.25 159.81 399.44C137.55 389.44 127.42 374.23 125.31 352.94C123.2 331.65 123.92 324.5 131.31 288.86C138.7 253.22 136.56 238.15 136.56 238.15C147.19 234.15 148.5 217.25 148.5 217.25C162.81 227.88 180.75 204.88 180.75 204.88C188.81 216.31 206.06 212.14 213.88 200.31C215.25 208.88 232.88 213.44 237.25 199.75C235.19 216.06 255.94 224.25 269.5 208.88C270.18 208.1 270.82 208.5 271 209.44C273.65 223.5 288.73 226.35 297.4 221.44C299.99 219.96 299.94 221.5 299.94 221.5C298.86 232.24 313.88 236.5 317.09 236.2C317.9 236.14 318.09 236.75 317.69 236.98C311.59 240.98 308.39 247.54 307.46 254.37C306.13 264.17 310.63 274.04 316.88 277.14C320.16 278.76 318.23 280.14 318.23 280.14C310.9 286.06 308.56 293.93 308.48 297.73C308.4 301.53 310.81 311.14 317.81 311.98C320.3 312.27 318.98 313.89 318.98 313.89C313.13 321.33 313.65 335.56 319.48 338.23C322.07 339.37 322.21 339.39 321.08 340.19Z"
|
||||||
|
fill="#070610"
|
||||||
|
style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M116.48 346.51C97.2602 345.19 83.3802 330.08 93.0002 312.67C80.3802 308.62 75.2502 293.25 85.2502 285.12C73.1202 279.62 63.6202 258.5 84.6202 238.38C72.2402 230.38 73.7502 213.38 82.0002 205.5C74.0002 199.25 72.8802 159 98.7502 154.5C92.8802 135.12 111 115.24 122.25 118C124.88 103.76 144.25 87 165.62 99C167.92 100.29 168.51 100.54 169.5 97.25C172.25 88.12 198.5 56.01 223.12 73.88C227.5 76.38 227.93 75.88 228 72.25C228.25 59.88 256.53 45.5 270.75 67.25C272.88 70.5 273.12 70 275.25 67.38C277.38 64.76 303.12 48.25 315.75 86.88C339.12 74.12 359.25 84 359.25 101.38C378.12 94.5 394 116.75 390.12 136.62C413.5 136.88 428.5 160.25 417.88 184.12C442.88 194.25 447.5 226.5 422.5 236.12C442.88 246.75 438.92 271.48 420.12 280.88C418.62 281.62 419.03 282.19 419.5 282.5C425.5 286.5 434.85 317.44 404.5 319.12C400 319.38 400.38 320.88 401.75 322.12C403.12 323.36 415.12 338.12 394.5 340.75C401.38 356.12 384.5 363.5 377.38 362.25C379.25 370.75 366 381.88 348.62 376.5C346.38 385.73 324.88 385 319 379.5C317.873 378.546 316.965 377.36 316.34 376.022C315.715 374.684 315.388 373.227 315.38 371.75L320.63 369.6C320.63 369.6 320.89 377.84 329.73 377.73C338.73 377.61 340.54 373.98 340.02 368.73C339.75 365.98 341.75 366.6 341.75 366.6C341.75 366.6 344.62 367.1 345.75 365.86C346.88 364.62 348.25 364.86 348.75 366.1C349.25 367.34 352.88 375.1 362.62 370.48C372.36 365.86 368 359.25 367 357.38C366 355.51 366.12 353.38 367 353.12C368.606 353.008 370.109 352.294 371.21 351.12C372.6 349.48 373.97 353.4 375.28 354.83C376.41 356.04 385.28 355.56 385.28 345.92C385.28 339.16 381.78 336.04 381.78 336.04C381.78 336.04 399.65 335.54 399.91 329.16C400.17 322.78 393.51 321.76 391.28 321.16C390.227 320.903 389.312 320.254 388.721 319.345C388.13 318.437 387.908 317.337 388.099 316.271C388.29 315.204 388.881 314.25 389.75 313.603C390.62 312.957 391.704 312.666 392.78 312.79C396.89 313.18 417.15 312.17 417.15 295.79C417.15 284.29 410.28 283.16 410.28 283.16C405.53 281.79 407.03 273.36 411.96 273.44C418.53 273.54 426.91 264.66 426.65 253.92C426.65 253.92 428.2 236.68 412.03 239.79C405.53 241.04 406.78 236.92 409.15 234.79C411.52 232.66 437.69 216.58 424.91 199.54C415.53 187.04 407.86 190.54 407.86 190.54C403.53 191.93 400.57 184.54 404.91 181.3C410.15 177.43 421.53 145.93 389.28 143.43C387.15 143.26 386.34 143.95 385.65 145.43C384.96 146.91 382.91 146.15 382.78 144.75C382.68 143.63 382.25 143.39 381.27 143.75C380.29 144.11 376.78 143.22 380.65 137.35C385.49 130.02 378.91 105.88 366.15 105.6C360.53 105.48 355.49 110.43 353.15 110.69C351.5 110.88 349.62 109.89 350.78 103.1C351.53 98.72 348.56 86.18 331.28 88.1C324.53 88.85 318.94 90.25 315.53 95.1C313.9 97.41 312.46 97.96 310.15 97.85C306.97 97.7 305.41 95.1 305.91 89.35C306.41 83.6 299.66 68.48 287.91 68.48C282.15 68.48 275.91 73.1 272.03 77.35C268.28 71.72 258.61 55.77 241.53 63.48C231.25 68 230.62 78.62 230.75 80.75C230.88 82.88 228.5 83.88 226.12 82C223.74 80.12 198 57.5 174.88 99C170.74 106.43 169.48 108.56 163.88 104.88C159.5 102 133.34 95.49 129.75 118.38C128.75 124.75 127.25 125.38 119.15 125.13C113.28 124.95 100.88 136.75 108.88 157.75C88.3802 162.12 83.5602 169.75 83.8802 185.25C84.1202 197.75 85.6202 202.79 88.6202 205.12C88.6202 205.12 89.7502 205.25 87.8802 208.38C86.0102 211.51 77.8202 228.91 102.12 240.12C103.75 240.88 104 244.38 101 244.38C98.0002 244.38 81.8802 250.25 82.1202 263.25C82.3602 276.25 94.0002 282 99.1202 282.25C104.24 282.5 102.5 287.88 99.2502 287.75C96.0002 287.62 90.2502 291.38 90.1202 297.12C89.9902 302.86 93.0002 307.22 101.5 307.5C107.37 307.69 111.21 310.14 111.88 311.62C113 314.12 108 312.38 105.62 313.62C103.24 314.86 95.4802 333.94 115.16 340.22L116.48 346.51Z"
|
||||||
|
fill="#060500"
|
||||||
|
style="fill:#060500;fill:color(display-p3 0.0235 0.0196 0.0000);fill-opacity:1;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M365.31 267.69C360.31 267.44 353.69 268.25 350.69 271C351.75 261.75 348 261.18 345 261C342 260.82 342.25 263.79 342.25 263.79C342.25 263.79 349.5 274.54 346.25 315.79C349.238 314.474 351.828 312.396 353.759 309.763C355.69 307.13 356.894 304.035 357.25 300.79C357.25 300.79 362 298.34 365.5 298.44C369 298.54 380 295.54 379.75 284.04C379.5 272.54 370.31 267.94 365.31 267.69ZM360.56 293C357.06 294.69 357 292.81 357.06 290.88C357.12 288.95 357.06 284.25 355.69 282.69C355.295 282.349 355.038 281.875 354.968 281.357C354.898 280.839 355.02 280.314 355.31 279.88C355.31 279.88 369.69 272.56 370.12 279.38C370.55 286.2 364.06 291.31 360.56 293Z"
|
||||||
|
fill="#070610"
|
||||||
|
style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M355.31 279.88C355.019 280.314 354.898 280.839 354.968 281.357C355.038 281.875 355.294 282.349 355.69 282.69C357.06 284.25 357.12 288.94 357.06 290.88C357 292.82 357.06 294.69 360.56 293C364.06 291.31 370.56 286.19 370.12 279.38C369.68 272.57 355.31 279.88 355.31 279.88Z"
|
||||||
|
fill="#C3915E"
|
||||||
|
style="fill:#C3915E;fill:color(display-p3 0.7647 0.5686 0.3686);fill-opacity:1;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Face group -->
|
||||||
|
<g class="face" class:hover={isHovering} class:blink={isBlinking}>
|
||||||
|
<!-- Normal face -->
|
||||||
|
<g class="normal">
|
||||||
|
<path
|
||||||
|
d="M216.12 280C216.12 277.37 216.28 276 218.72 275.87C221.16 275.74 221.06 278.75 221.06 278.75C221.06 278.75 220.67 293.91 215.06 307.75C215.06 307.75 212.19 315.19 210.12 315.19C209.084 315.438 207.994 315.317 207.038 314.848C206.081 314.379 205.318 313.591 204.88 312.62C204.88 312.62 203.56 309.07 202.16 308.97C199.59 308.78 197.96 313.58 197.6 317.23C197.38 319.5 196.44 320.94 194.12 320.94C191.8 320.94 190.94 319.55 191.19 317.12C192.19 310.94 196.47 303.91 199.44 300.94C199.728 300.646 200.072 300.411 200.451 300.25C200.831 300.088 201.238 300.003 201.65 300C204.75 300 205.65 302.67 206.07 304.89C206.81 308.75 208.12 308.47 208.12 308.47C208.12 308.47 208.7 308.67 209.5 307.06C212.94 300.12 216.12 288.44 216.12 280Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M267.4 265.57C267.49 263.69 268.84 260.57 271.88 261C274.25 261.31 275.69 263 275.31 266.5C274.88 270.5 271.47 287.69 268.86 292.25C267.37 294.86 266 295.44 263.86 294.96C262.86 294.73 261.73 293.44 262.28 290.06C263 285.59 266.77 277.57 267.4 265.57Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M168.91 258.88C168.91 258.88 170.91 258.81 171.29 261.53C172.1 266.64 171.55 276.73 169.64
|
||||||
|
285.1C169.64 285.1 168.27 288.92 165.46 288.92C162.65 288.92 162.29 285.75 162.36 283.66C162.43
|
||||||
|
281.57 165.1 275.59 165.1 264.86C165.1 258.08 168.91 258.88 168.91 258.88Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M178.25 359.94C198 360.69 231.62 355.44 231.62 355.44C231.62 355.44 232 344.88 235.5 341C239
|
||||||
|
337.12 241.12 339.12 241.12 339.12C241.12 339.12 244 340.5 241.12 345.12C238.24 349.74 238.56
|
||||||
|
356.38 239.31 359.56C240.06 362.74 245 370.5 245 370.5C245.033 370.662 245.02 370.83 244.964
|
||||||
|
370.986C244.908 371.141 244.809 371.278 244.68 371.381C244.551 371.485 244.396 371.55 244.232
|
||||||
|
371.571C244.068 371.592 243.901 371.568 243.75 371.5C242.38 371.12 241.12 372.75 241.12 372.75C241.12
|
||||||
|
372.75 240.38 373.61 238.88 371.88C236.122 368.537 233.945 364.754 232.44 360.69C232.44 360.69
|
||||||
|
203.86 366.31 177.92 365.31C177.92 365.31 175.81 365.69 175.06 362.56C174.35 359.6 178.25 359.94
|
||||||
|
178.25 359.94Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Open mouth face -->
|
||||||
|
<g class="open-mouth">
|
||||||
|
<path
|
||||||
|
d="M216.12 280C216.12 277.37 216.28 276 218.72 275.87C221.16 275.74 221.06 278.75 221.06 278.75C221.06 278.75 220.67 293.91 215.06 307.75C215.06 307.75 212.19 315.19 210.12 315.19C209.084 315.438 207.994 315.317 207.038 314.848C206.081 314.379 205.318 313.591 204.88 312.62C204.88 312.62 203.56 309.07 202.16 308.97C199.59 308.78 197.96 313.58 197.6 317.23C197.38 319.5 196.44 320.94 194.12 320.94C191.8 320.94 190.94 319.55 191.19 317.12C192.19 310.94 196.47 303.91 199.44 300.94C199.728 300.646 200.072 300.411 200.451 300.25C200.831 300.088 201.238 300.003 201.65 300C204.75 300 205.65 302.67 206.07 304.89C206.81 308.75 208.12 308.47 208.12 308.47C208.12 308.47 208.7 308.67 209.5 307.06C212.94 300.12 216.12 288.44 216.12 280Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M267.4 265.57C267.49 263.69 268.84 260.57 271.88 261C274.25 261.31 275.69 263 275.31 266.5C274.88 270.5 271.47 287.69 268.86 292.25C267.37 294.86 266 295.44 263.86 294.96C262.86 294.73 261.73 293.44 262.28 290.06C263 285.59 266.77 277.57 267.4 265.57Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M168.91 258.88C168.91 258.88 170.91 258.81 171.29 261.53C172.1 266.64 171.55 276.73 169.64 285.1C169.64 285.1 168.27 288.92 165.46 288.92C162.65 288.92 162.29 285.75 162.36 283.66C162.43 281.57 165.1 275.59 165.1 264.86C165.1 258.08 168.91 258.88 168.91 258.88Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M256.217 362.498C256.813 344.624 226.749 338.344 212.256 336.895C190.517 336.895 165.88 343.175 165.88 362.498C165.88 377.987 186.67 387.171 212.256 388.101C238.826 389.068 255.734 376.991 256.217 362.498Z"
|
||||||
|
fill="#F96A6A"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M174.576 377.474C167.813 365.88 178.924 345.107 203.561 335.928C186.17 335.928 167.33 347.136 165.397 355.252C163.465 363.368 169.262 373.609 174.576 377.474Z"
|
||||||
|
fill="#821818"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M220.573 347.039L221.539 338.827L215.742 337.378L209.462 337.861L208.979 346.073L220.573 347.039Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M206.081 346.556L207.047 338.344L201.25 336.895L194.97 337.378L194.487 345.59L206.081 346.556Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M210.324 333.996C235.928 335.445 257.806 346.099 258.633 359.116C260.565 389.551 224.817 391 210.324 391C195.832 391 161.237 385.203 162.499 359.116C163.154 345.59 184.721 332.547 210.324 333.996ZM255.251 362.015C251.869 345.107 232.546 340.276 211.29 338.344C201.284 337.434 169.712 340.759 167.813 359.116C165.464 381.821 200.856 387.522 211.29 387.135C224.334 386.652 255.251 383.754 255.251 362.015Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M208.979 348.006C206.943 347.039 206.621 345.59 206.943 344.141L207.53 337.861L210.429 337.378C210.267 338.988 209.946 343.271 209.946 343.658C209.946 344.624 210.419 345.126 211.395 345.59C213.052 346.378 218.269 347.115 219.607 345.107C220.474 343.807 220.573 339.793 220.573 338.344L224.438 338.344C224.2 339.889 223.738 344.407 222.989 346.073C222.5 347.014 220.879 348.693 220.09 348.972C217.605 349.505 211.145 349.033 208.979 348.006Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M194.486 347.522C192.071 346.073 191.749 343.175 192.071 341.725L193.037 337.378L195.936 336.895C195.775 338.505 195.453 342.788 195.453 343.175C195.453 344.141 195.927 344.643 196.902 345.107C198.559 345.895 203.776 346.632 205.114 344.624C205.981 343.324 206.08 339.31 206.08 337.861L209.945 337.861L209.945 337.861C209.707 339.406 208.175 345.373 207.425 347.039C206.937 347.98 206.386 348.21 205.597 348.489C203.112 349.022 196.541 348.756 194.486 347.522Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Blinking face -->
|
||||||
|
<g class="blink">
|
||||||
|
<path
|
||||||
|
d="M216.12 280C216.12 277.37 216.28 276 218.72 275.87C221.16 275.74 221.06 278.75 221.06 278.75C221.06 278.75 220.67 293.91 215.06 307.75C215.06 307.75 212.19 315.19 210.12 315.19C209.084 315.438 207.994 315.317 207.038 314.848C206.081 314.379 205.318 313.591 204.88 312.62C204.88 312.62 203.56 309.07 202.16 308.97C199.59 308.78 197.96 313.58 197.6 317.23C197.38 319.5 196.44 320.94 194.12 320.94C191.8 320.94 190.94 319.55 191.19 317.12C192.19 310.94 196.47 303.91 199.44 300.94C199.728 300.646 200.072 300.411 200.451 300.25C200.831 300.088 201.238 300.003 201.65 300C204.75 300 205.65 302.67 206.07 304.89C206.81 308.75 208.12 308.47 208.12 308.47C208.12 308.47 208.7 308.67 209.5 307.06C212.94 300.12 216.12 288.44 216.12 280Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M262.09 286.69C262.51 285.52 263.24 284.85 264.22 285.22C265.53 285.72 264.78 288.12 266.09 288.59C269.01 289.64 269.21 286.7 270.2 286.59C271.64 286.4 271.8 288.19 271.51 290.07C271.11 292.66 270.58 293.22 269.69 294.26C268.16 296.04 266.56 296.26 264.44 295.76C263.44 295.53 261.81 294.57 261.63 291.76C261.479 290.056 261.635 288.339 262.09 286.69Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M166.38 281.12C168.81 281.12 168.88 279.12 169.63 279.12C170.38 279.12 170.85 280.01 171.04 281.03C171.518 282.867 171.297 284.816 170.42 286.5C170.42 286.5 167.75 289.67 165.5 289.31C165.067 289.287 164.642 289.178 164.252 288.988C163.862 288.797 163.514 288.531 163.229 288.203C162.945 287.875 162.729 287.494 162.595 287.081C162.461 286.668 162.412 286.232 162.45 285.8C162.52 283.71 163.06 284.46 163.08 282.25C163.08 280.25 163.3 279.5 164.29 279.33C165.56 279.12 165.19 281.12 166.38 281.12Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M178.25 359.94C198 360.69 231.62 355.44 231.62 355.44C231.62 355.44 232 344.88 235.5 341C239
|
||||||
|
337.12 241.12 339.12 241.12 339.12C241.12 339.12 244 340.5 241.12 345.12C238.24 349.74 238.56
|
||||||
|
356.38 239.31 359.56C240.06 362.74 245 370.5 245 370.5C245.033 370.662 245.02 370.83 244.964
|
||||||
|
370.986C244.908 371.141 244.809 371.278 244.68 371.381C244.551 371.485 244.396 371.55 244.232
|
||||||
|
371.571C244.068 371.592 243.901 371.568 243.75 371.5C242.38 371.12 241.12 372.75 241.12 372.75C241.12
|
||||||
|
372.75 240.38 373.61 238.88 371.88C236.122 368.537 233.945 364.754 232.44 360.69C232.44 360.69
|
||||||
|
203.86 366.31 177.92 365.31C177.92 365.31 175.81 365.69 175.06 362.56C174.35 359.6 178.25 359.94
|
||||||
|
178.25 359.94Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Additional elements that should always be visible -->
|
||||||
|
<path
|
||||||
|
d="M253.28 242.12C253.22 248.12 259.28 252.5 269.88 252.75C280.48 253 285.55 251.58 290.88 246.67C296.21 241.76 280.36 237.94 271.04 238.26C261.72 238.58 253.31 239 253.28 242.12Z"
|
||||||
|
fill="#AD723B"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M255.32 241C255.32 241 256.5 235.67 271.67 236.17C286.84 236.67 288.33 241 289.5 242C290.67 243 290.83 244.67 288 245.5C288 245.5 266.43 247.93 258.33 244.33C254.42 242.59 255.32 241 255.32 241Z"
|
||||||
|
fill="#935C0A"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M293.13 242.18C292.87 240.61 292.87 238.52 287.81 236.6C282.75 234.68 276.21 234.42 268.76 234.68C264.253 234.858 259.79 235.638 255.49 237C255.49 237 251.69 240.23 254.05 243.89C256.41 247.55 272.54 248.19 272.54 248.19C272.54 248.19 284.93 248.78 289.38 247.38C292.89 246.23 293.39 243.75 293.13 242.18ZM284.23 243.93C284.23 243.93 267.23 245.08 259.23 242.88C255.44 241.88 256.7 239.39 260.8 238.69C264.191 238.337 267.601 238.193 271.01 238.26C271.01 238.26 283.68 237.51 286.28 242.1C287.46 244.1 284.23 243.93 284.23 243.93Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M170 233.33C175 233.33 178.17 233.6 179.5 236.13C180.83 238.66 180.62 241.63 177.67 242.13C174.31 242.73 171.08 242.8 163.81 241.84C160.5 241.39 157.14 241.4 154.94 242.58C152.74 243.76 151.25 241.58 153.75 238.71C156.11 236 165 233.33 170 233.33Z"
|
||||||
|
fill="#935C0A"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M183.62 236.13C183.62 236.13 182.38 231 171.62 230.88C160.86 230.76 150.22 236.13 150.22 236.13C150.22 236.13 145.72 239.5 147.35 242.75C148.98 246 154.85 245.08 154.85 245.08C157.643 244.474 160.484 244.12 163.34 244.02C166.19 244.1 173.59 244.88 173.59 244.88C176.466 244.962 179.299 244.175 181.72 242.62C182.288 242.337 182.792 241.939 183.199 241.452C183.606 240.965 183.909 240.399 184.087 239.79C184.265 239.181 184.316 238.541 184.236 237.911C184.155 237.281 183.946 236.675 183.62 236.13ZM176.38 240.62C173.585 241.282 170.675 241.282 167.88 240.62C163.5 239.5 157.88 240.5 155.5 241.12C153.12 241.74 152.62 239.75 153.62 239C154.62 238.25 158.62 235.12 169.25 235.12C169.25 235.12 176.88 235.04 178.12 237.38C179.68 240.28 176.38 240.62 176.38 240.62Z"
|
||||||
|
fill="#070610"
|
||||||
|
/>
|
||||||
|
<!-- Blush -->
|
||||||
|
<path
|
||||||
|
d="M266.69 341.67C283.43 341.67 297 332.268 297 320.67C297 309.072 283.43 299.67 266.69 299.67C249.95 299.67 236.38 309.072 236.38 320.67C236.38 332.268 249.95 341.67 266.69 341.67Z"
|
||||||
|
fill="url(#paint0_radial_705_2)"
|
||||||
|
style=""
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M145.882 341.388C162.397 344.121 177.32 337.06 179.214 325.618C181.107 314.176 169.254 302.684 152.738 299.952C136.223 297.219 121.3 304.28 119.407 315.722C117.514 327.164 129.367 338.656 145.882 341.388Z"
|
||||||
|
fill="url(#paint1_radial_705_2)"
|
||||||
|
style=""
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
<radialGradient
|
||||||
|
id="paint0_radial_705_2"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="1"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(267.775 321.564) scale(28.341 22.842)"
|
||||||
|
>
|
||||||
|
<stop
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.18"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.3"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.16"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.63"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.1"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.99"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0"
|
||||||
|
style="stop-color:none;stop-opacity:0;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0"
|
||||||
|
style="stop-color:none;stop-opacity:0;"
|
||||||
|
/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient
|
||||||
|
id="paint1_radial_705_2"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="1"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(149.715 321.643) rotate(9.39525) scale(28.341 22.842)"
|
||||||
|
>
|
||||||
|
<stop
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.18"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.3"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.16"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.63"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0.1"
|
||||||
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.99"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0"
|
||||||
|
style="stop-color:none;stop-opacity:0;"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#E86A58"
|
||||||
|
stop-opacity="0"
|
||||||
|
style="stop-color:none;stop-opacity:0;"
|
||||||
|
/>
|
||||||
|
</radialGradient>
|
||||||
|
<clipPath id="clip0_705_2">
|
||||||
|
<rect width="497" height="497" fill="white" style="fill:white;fill-opacity:1;" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.face-container {
|
||||||
|
--face-size: #{$avatar-radius * 2};
|
||||||
|
width: var(--face-size);
|
||||||
|
height: var(--face-size);
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.face .normal,
|
||||||
|
.face .open-mouth,
|
||||||
|
.face .blink {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face .normal {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face.hover .normal {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face.hover .open-mouth {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face.blink .normal {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face.blink .blink {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.face-container svg) {
|
||||||
|
border-radius: $avatar-radius;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue