javascriptsvgfigma

How can I fill color inside an element in figma?

When these 3 Svg Icons are clicked, I am trying to implement the effect of filling the color (see the figure below) when clicking the button of the Navigator of Instagram. So I'm going to use the method of making and changing two Svg's when clicking.

How can I create a fill effect like the one shown below in Figma? I need help. Please tell me the svg code or method.

These are the 3 Svg files I want to change.

svg {
  height:160px;
  width:160px;
}
<svg viewBox="0 0 470 470" fill="black" xmlns="http://www.w3.org/2000/svg">
<path d="M234.667 0C188.254 0 142.884 13.763 104.293 39.5485C65.7022 65.334 35.6244 101.984 17.863 144.864C0.101678 187.743 -4.54551 234.927 4.50916 280.448C13.5638 325.969 35.9137 367.782 68.7324 400.601C101.551 433.42 143.365 455.77 188.886 464.824C234.406 473.879 281.59 469.232 324.47 451.47C367.35 433.709 404 403.631 429.785 365.04C455.571 326.45 469.333 281.079 469.333 234.667C469.26 172.452 444.513 112.806 400.52 68.8133C356.527 24.8207 296.882 0.0733967 234.667 0ZM234.667 426.667C196.693 426.667 159.572 415.406 127.997 394.309C96.4231 373.212 71.8139 343.225 57.2819 308.142C42.7499 273.058 38.9476 234.454 46.356 197.209C53.7644 159.965 72.0506 125.754 98.9023 98.9022C125.754 72.0505 159.965 53.7643 197.209 46.3559C234.454 38.9475 273.059 42.7498 308.142 57.2818C343.225 71.8138 373.212 96.4229 394.309 127.997C415.406 159.571 426.667 196.693 426.667 234.667C426.605 285.569 406.356 334.369 370.363 370.363C334.369 406.356 285.569 426.605 234.667 426.667Z"/>
<path d="M341.333 213.333H256V128C256 122.342 253.752 116.916 249.752 112.915C245.751 108.914 240.325 106.667 234.667 106.667C229.009 106.667 223.583 108.914 219.582 112.915C215.581 116.916 213.333 122.342 213.333 128V213.333H128C122.342 213.333 116.916 215.581 112.915 219.582C108.914 223.583 106.667 229.009 106.667 234.667C106.667 240.325 108.914 245.751 112.915 249.752C116.916 253.752 122.342 256 128 256H213.333V341.333C213.333 346.991 215.581 352.418 219.582 356.418C223.583 360.419 229.009 362.667 234.667 362.667C240.325 362.667 245.751 360.419 249.752 356.418C253.752 352.418 256 346.991 256 341.333V256H341.333C346.991 256 352.418 253.752 356.418 249.752C360.419 245.751 362.667 240.325 362.667 234.667C362.667 229.009 360.419 223.583 356.418 219.582C352.418 215.581 346.991 213.333 341.333 213.333Z"/>
</svg>
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M508.759 217.173C508.164 213.251 506.516 209.563 503.99 206.504C501.464 203.445 498.156 201.128 494.417 199.802L454.082 185.46C451.72 178.765 449.019 172.196 445.99 165.776L464.346 127.148C466.046 123.567 466.745 119.592 466.367 115.646C465.99 111.699 464.551 107.929 462.204 104.734C446.785 83.7422 428.259 65.221 407.263 49.8081C404.07 47.4598 400.3 46.0217 396.355 45.6471C392.409 45.2724 388.436 45.9753 384.858 47.6807L346.254 66.0218C339.829 62.9936 333.255 60.2947 326.555 57.9355L312.208 17.595C310.881 13.8642 308.568 10.5622 305.516 8.03963C302.464 5.51707 298.785 3.86807 294.871 3.26768C266.516 -1.08988 245.531 -1.08988 217.132 3.26768C213.218 3.86929 209.54 5.51873 206.488 8.04112C203.436 10.5635 201.123 13.8648 199.795 17.595L185.447 57.9355C178.75 60.2936 172.177 62.9926 165.755 66.0218L127.136 47.6807C123.559 45.977 119.587 45.2752 115.643 45.6498C111.698 46.0244 107.93 47.4615 104.737 49.8081C83.7408 65.221 65.2146 83.7422 49.7961 104.734C47.4479 107.929 46.0088 111.699 45.6316 115.646C45.2545 119.592 45.9534 123.567 47.654 127.148L66.0098 165.776C62.9817 172.196 60.2808 178.766 57.9176 185.46L17.5771 199.816C13.8422 201.144 10.5369 203.459 8.01259 206.515C5.48827 209.571 3.8393 213.255 3.24099 217.173C1.04017 231.63 0.0117493 243.956 0.0117493 256.015C0.0117493 268.056 1.04017 280.4 3.24099 294.857C3.83581 298.779 5.48398 302.467 8.00975 305.526C10.5355 308.585 13.8442 310.902 17.583 312.228L57.9176 326.57C60.2841 333.268 62.9849 339.842 66.0098 346.269L47.654 384.882C45.9541 388.46 45.2551 392.432 45.6312 396.376C46.0073 400.32 47.4445 404.088 49.7902 407.281C65.2097 428.278 83.7379 446.804 104.737 462.222C107.928 464.573 111.699 466.013 115.645 466.388C119.591 466.763 123.565 466.058 127.142 464.349L165.746 446.008C172.171 449.036 178.745 451.735 185.445 454.094L199.792 494.435C201.119 498.166 203.432 501.468 206.484 503.99C209.536 506.513 213.215 508.162 217.129 508.762C231.315 510.948 244.026 512.006 255.997 512.006C267.968 512.006 280.682 510.948 294.865 508.762C298.779 508.161 302.458 506.512 305.51 503.99C308.562 501.467 310.875 498.166 312.202 494.435L326.55 454.094C333.249 451.735 339.824 449.036 346.248 446.008L384.852 464.349C388.431 466.057 392.406 466.761 396.353 466.386C400.301 466.012 404.072 464.572 407.266 462.222C428.263 446.804 446.789 428.278 462.207 407.281C464.553 404.088 465.99 400.32 466.366 396.376C466.742 392.432 466.043 388.46 464.343 384.882L445.987 346.269C449.016 339.844 451.717 333.269 454.079 326.57L494.414 312.228C498.153 310.902 501.462 308.586 503.988 305.527C506.514 302.467 508.162 298.779 508.756 294.857C510.957 280.4 511.985 268.059 511.985 256.015C511.985 243.971 510.96 231.627 508.759 217.173ZM467.046 275.382L429.206 288.839C425.944 289.996 423.002 291.909 420.622 294.421C418.242 296.934 416.491 299.976 415.514 303.296C412.135 314.723 407.686 325.536 402.279 335.45C400.624 338.491 399.711 341.88 399.616 345.341C399.52 348.801 400.245 352.236 401.73 355.363L418.893 391.461C410.606 401.423 401.422 410.603 391.457 418.887L355.366 401.745C352.241 400.254 348.807 399.527 345.347 399.621C341.886 399.716 338.497 400.63 335.459 402.288C325.53 407.689 314.711 412.132 303.275 415.517C299.958 416.495 296.919 418.245 294.408 420.624C291.897 423.002 289.984 425.941 288.827 429.201L275.364 467.055C261.621 468.454 250.379 468.454 236.636 467.055L223.173 429.201C222.013 425.943 220.1 423.005 217.589 420.627C215.078 418.249 212.041 416.498 208.725 415.517C197.283 412.132 186.455 407.689 176.541 402.288C173.505 400.624 170.115 399.707 166.653 399.612C163.192 399.518 159.757 400.249 156.634 401.745L120.542 418.902C110.583 410.607 101.4 401.422 93.1072 391.461L110.27 355.363C111.755 352.236 112.48 348.802 112.384 345.341C112.289 341.88 111.376 338.491 109.721 335.45C104.329 325.565 99.8771 314.738 96.4863 303.281C95.5048 299.964 93.7526 296.927 91.3729 294.417C88.9931 291.907 86.0533 289.996 82.7936 288.839L44.9537 275.382C44.2397 268.497 43.8959 262.153 43.8959 256.012C43.8959 249.871 44.2397 243.542 44.9537 236.657L82.8024 223.188C86.0607 222.03 88.999 220.119 91.3772 217.609C93.7554 215.099 95.5061 212.062 96.4863 208.746C99.8713 197.319 104.323 186.491 109.721 176.562C111.376 173.524 112.289 170.137 112.384 166.679C112.48 163.22 111.755 159.789 110.27 156.664L93.1072 120.566C101.399 110.605 110.583 101.419 120.542 93.1251L156.649 110.282C162.969 113.326 170.391 113.082 176.556 109.738C186.464 104.338 197.283 99.895 208.725 96.5101C212.041 95.5292 215.079 93.7783 217.589 91.4003C220.1 89.0222 222.013 86.0843 223.173 82.8262L236.636 44.9716C250.25 43.5582 261.512 43.5582 275.364 44.9716L288.827 82.8262C289.987 86.0841 291.9 89.0217 294.411 91.3997C296.922 93.7777 299.959 95.5288 303.275 96.5101C314.717 99.895 325.545 104.338 335.459 109.738C338.495 111.403 341.885 112.32 345.347 112.415C348.808 112.509 352.243 111.778 355.366 110.282L391.457 93.1251C401.417 101.419 410.601 110.605 418.893 120.566L401.73 156.664C400.245 159.789 399.52 163.22 399.616 166.679C399.711 170.137 400.624 173.524 402.279 176.562C407.695 186.52 412.143 197.333 415.514 208.731C416.491 212.051 418.242 215.093 420.622 217.605C423.002 220.118 425.944 222.031 429.206 223.188L467.046 236.645C467.76 243.53 468.104 249.874 468.104 256.015C468.104 262.156 467.76 268.497 467.046 275.382Z" fill="black"/>
<path d="M256 149.274C199.989 149.274 154.419 194.842 154.419 250.855C154.419 306.869 199.986 352.437 256 352.437C312.014 352.437 357.581 306.869 357.581 250.855C357.581 194.842 312.011 149.274 256 149.274ZM256 308.553C224.187 308.553 198.303 282.669 198.303 250.855C198.303 219.042 224.187 193.158 256 193.158C287.813 193.158 313.697 219.042 313.697 250.855C313.697 282.669 287.813 308.553 256 308.553Z" fill="black"/>
</svg>
```


<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M476.373 207.573C472.359 202.69 467.311 198.76 461.592 196.067C455.873 193.373 449.628 191.984 443.307 192H184.32C169.536 192.007 155.21 197.132 143.777 206.504C132.344 215.877 124.507 228.918 121.6 243.413L89.1733 405.333H85.3333C79.6754 405.333 74.2491 403.086 70.2484 399.085C66.2476 395.084 64 389.658 64 384V128C64 122.342 66.2476 116.916 70.2484 112.915C74.2491 108.914 79.6754 106.667 85.3333 106.667H164.267L222.933 145.707C226.404 148.04 230.485 149.301 234.667 149.333H362.667C368.325 149.333 373.751 151.581 377.752 155.582C381.752 159.583 384 165.009 384 170.667H426.667C426.667 153.693 419.924 137.414 407.921 125.412C395.919 113.41 379.641 106.667 362.667 106.667H241.067L182.4 67.6267C178.929 65.2938 174.849 64.0327 170.667 64H85.3333C68.3595 64 52.0808 70.7428 40.0785 82.7452C28.0762 94.7475 21.3333 111.026 21.3333 128V384C21.3333 400.974 28.0762 417.253 40.0785 429.255C52.0808 441.257 68.3595 448 85.3333 448H391.68C406.464 447.993 420.789 442.868 432.223 433.496C443.656 424.123 451.492 411.082 454.4 396.587L485.12 242.987C486.37 236.804 486.234 230.422 484.722 224.298C483.21 218.175 480.358 212.463 476.373 207.573ZM412.373 388.267C411.376 393.158 408.695 397.544 404.797 400.663C400.899 403.781 396.031 405.434 391.04 405.333H132.693L163.413 251.733C164.411 246.842 167.092 242.456 170.99 239.337C174.888 236.219 179.756 234.566 184.747 234.667H443.307L412.373 388.267Z" fill="black"/>
</svg>

Here is an example of the effect I want to create (Instagram)

(Before click) enter image description here

(After click) enter image description here

Solution

  • Unfortunately, vector files have a closed structure. This means that for some icons you can fill the middle with color, for others you can't. In the icons you provided, this is not possible.

    There are only 3 options that I see here:

    https://fonts.google.com/icons?icon.query=settings&icon.style=Rounded

    https://vuesax.com/