Home > Software design >  Circle mask progress bar
Circle mask progress bar

Time:10-05

Example

I need to make a progress bar by overlaying one svg on another (the same but translucent) I tried many ways to solve this problem, but nothing worked for me, I will be glad for any solutions to the problem.

SVG 1( translucent)

<svg  viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5304 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95554 114.779C6.76567 112.314 5.70308 109.79 4.77196 107.217C4.20828 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M6.1804 101.901C4.592 102.373 2.91652 101.468 2.50514 99.8632C1.82559 97.212 1.28253 94.5276 0.878128 91.8207C0.633316 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.1804 101.901Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M3.29675 86.7537C1.64629 86.899 0.184616 85.6789 0.101273 84.0241C-0.0363922 81.2906 -0.0337067 78.5519 0.109344 75.8187C0.195938 74.1641 1.66 72.9469 3.3102 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9725 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6472 85.9304 10.9968 86.0757L3.29675 86.7537Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M3.48219 71.3962C1.83571 71.2111 0.645279 69.7251 0.892014 68.0867C1.29958 65.3803 1.84578 62.6966 2.52843 60.0462C2.94168 58.4417 4.61821 57.5392 6.20609 58.0123L13.614 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M6.65344 56.5632C5.0752 56.0589 4.19914 54.3685 4.76227 52.8102C5.69247 50.2362 6.75417 47.7116 7.94313 45.2465C8.6629 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M12.5675 42.8266C11.1165 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4754 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4306 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M74.096 3.22668C73.9689 1.5747 75.2052 0.126633 76.8607 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727314 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
    </svg>

SVG 2 (colored)

<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z" fill="white"/>
<path d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5305 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z" fill="white"/>
<path d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z" fill="white"/>
<path d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z" fill="white"/>
<path d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z" fill="white"/>
<path d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95553 114.779C6.76568 112.314 5.70309 109.79 4.77196 107.217C4.20829 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z" fill="white"/>
<path d="M6.18041 101.901C4.59199 102.373 2.91653 101.468 2.50514 99.8632C1.82559 97.212 1.28254 94.5276 0.878129 91.8207C0.633314 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.18041 101.901Z" fill="white"/>
<path d="M3.29675 86.7537C1.64628 86.899 0.184616 85.6789 0.101274 84.0241C-0.0363984 81.2906 -0.0337045 78.5519 0.109345 75.8187C0.195942 74.1641 1.66001 72.9469 3.31019 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9724 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6473 85.9304 10.9968 86.0757L3.29675 86.7537Z" fill="white"/>
<path d="M3.48219 71.3962C1.83572 71.2111 0.645278 69.7251 0.89201 68.0867C1.29958 65.3803 1.84577 62.6966 2.52843 60.0462C2.94169 58.4417 4.61821 57.5392 6.20608 58.0123L13.6141 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z" fill="white"/>
<path d="M6.65344 56.5632C5.0752 56.0589 4.19915 54.3685 4.76226 52.8102C5.69247 50.2362 6.75416 47.7116 7.94314 45.2465C8.66291 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z" fill="white"/>
<path d="M12.5675 42.8266C11.1166 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4755 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z" fill="white"/>
<path d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z" fill="white"/>
<path d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z" fill="white"/>
<path d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z" fill="white"/>
<path d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4307 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z" fill="white"/>
<path d="M74.096 3.22668C73.969 1.5747 75.2052 0.126633 76.8608 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z" fill="#EB2F2F"/>
<path d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727313 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z" fill="#EB2F2F"/>
<path d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z" fill="#EB2F2F"/>
<path d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z" fill="#EB2F2F"/>
<path d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z" fill="#EB2F2F"/>

CodePudding user response:

All that needs to happen is for the relevant number of blobs (paths in the SVG) to be set to opacity 1.

There are 20 blobs in all so each represents 5%.

To show 40% you want the first 40/5 = 8 to have their fill-opacity set to 1. This can be done with CSS.

Here's a little example of 40% using JS just to set the fill-opacities. They could just be set by hand in the SVG of course:

<body style="background: gray;">
  <svg  viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z"
            fill=""white
            fill-opacity="0.15"
        />
        <path
            d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5304 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986 142.537 59.8184 143.122C61.3966 143.627 62.3449 145.268 61.9123 146.867L59.8939 154.329Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M45.0911 148.632C44.3399 150.109 42.5307 150.702 41.0831 149.896C38.6918 148.565 36.3705 147.112 34.1282 145.542C32.7707 144.592 32.514 142.706 33.5143 141.385L38.1809 135.222C39.1811 133.902 41.059 133.648 42.4238 134.587C44.0084 135.678 45.6398 136.699 47.3133 137.648C48.7546 138.465 49.3466 140.266 48.5955 141.742L45.0911 148.632Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M31.755 140.012C30.7168 141.303 28.8244 141.513 27.5729 140.427C25.5056 138.633 23.5317 136.735 21.659 134.739C20.5253 133.53 20.6611 131.631 21.911 130.544L27.7424 125.47C28.9923 124.382 30.8824 124.519 32.0254 125.718C33.3526 127.111 34.7398 128.445 36.183 129.717C37.426 130.813 37.6363 132.696 36.5981 133.987L31.755 140.012Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M20.5283 128.909C19.2486 129.962 17.3532 129.781 16.3495 128.463C14.6916 126.285 13.1464 124.024 11.7202 121.688C10.8568 120.274 11.3771 118.442 12.8226 117.632L19.5663 113.855C21.0118 113.045 22.8342 113.564 23.7086 114.972C24.7238 116.606 25.8096 118.195 26.9631 119.734C27.9565 121.06 27.7782 122.947 26.4985 123.999L20.5283 128.909Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M11.961 116.051C10.4969 116.827 8.67584 116.271 7.95554 114.779C6.76567 112.314 5.70308 109.79 4.77196 107.217C4.20828 105.659 5.08374 103.968 6.6618 103.463L14.024 101.108C15.6021 100.603 17.2841 101.475 17.8598 103.029C18.5284 104.833 19.2751 106.607 20.098 108.346C20.8067 109.843 20.2553 111.656 18.7912 112.432L11.961 116.051Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M6.1804 101.901C4.592 102.373 2.91652 101.468 2.50514 99.8632C1.82559 97.212 1.28253 94.5276 0.878128 91.8207C0.633316 90.1821 1.82549 88.6975 3.47218 88.5143L11.1546 87.6596C12.8013 87.4764 14.2778 88.6642 14.5353 90.3009C14.8343 92.2013 15.216 94.0878 15.6791 95.955C16.078 97.5631 15.1794 99.2315 13.591 99.7027L6.1804 101.901Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M3.29675 86.7537C1.64629 86.899 0.184616 85.6789 0.101273 84.0241C-0.0363922 81.2906 -0.0337067 78.5519 0.109344 75.8187C0.195938 74.1641 1.66 72.9469 3.3102 73.0955L11.0089 73.7886C12.6591 73.9371 13.8692 75.3954 13.7955 77.0506C13.7099 78.9725 13.708 80.8971 13.7898 82.8192C13.8603 84.4745 12.6472 85.9304 10.9968 86.0757L3.29675 86.7537Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M3.48219 71.3962C1.83571 71.2111 0.645279 69.7251 0.892014 68.0867C1.29958 65.3803 1.84578 62.6966 2.52843 60.0462C2.94168 58.4417 4.61821 57.5392 6.20609 58.0123L13.614 60.2196C15.2019 60.6927 16.0986 62.3621 15.6978 63.9698C15.2325 65.8364 14.8486 67.7225 14.5474 69.6225C14.2879 71.2589 12.8101 72.445 11.1636 72.2599L3.48219 71.3962Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M6.65344 56.5632C5.0752 56.0589 4.19914 54.3685 4.76227 52.8102C5.69247 50.2362 6.75417 47.7116 7.94313 45.2465C8.6629 43.7541 10.4838 43.1978 11.9481 43.973L18.7797 47.5897C20.244 48.3649 20.796 50.1777 20.0879 51.6756C19.2656 53.4148 18.5195 55.189 17.8516 56.9931C17.2764 58.5469 15.5947 59.4203 14.0165 58.916L6.65344 56.5632Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M12.5675 42.8266C11.1165 42.0267 10.5838 40.1988 11.4375 38.7788C12.8478 36.4332 14.3775 34.1614 16.0206 31.9726C17.0153 30.6475 18.9093 30.4537 20.1962 31.4974L26.1997 36.3664C27.4866 37.4101 27.6778 39.2954 26.6934 40.6281C25.5505 42.1756 24.4754 43.7721 23.4714 45.4131C22.6067 46.8264 20.7879 47.3582 19.3369 46.5583L12.5675 42.8266Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M21.1803 30.3085C19.9147 29.2392 19.7513 27.3423 20.8672 26.1176C22.7106 24.0946 24.6566 22.1675 26.6976 20.3439C27.9331 19.24 29.8284 19.4219 30.8852 20.6979L35.8157 26.6511C36.8725 27.9271 36.6898 29.8133 35.4629 30.9268C34.0383 32.2197 32.6707 33.574 31.364 34.9858C30.2386 36.2018 28.3507 36.3661 27.0851 35.2969L21.1803 30.3085Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M32.0159 19.7794C30.9834 18.4836 31.1935 16.5912 32.5271 15.608C34.7301 13.9839 37.0149 12.4739 39.3727 11.084C40.8 10.2425 42.6232 10.7911 43.4106 12.2489L47.0837 19.0502C47.871 20.5081 47.3235 22.3222 45.9027 23.1747C44.2531 24.1645 42.6474 25.2257 41.0901 26.3552C39.7489 27.328 37.8654 27.1206 36.8329 25.8248L32.0159 19.7794Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M44.9964 11.4161C44.2432 9.94038 44.8267 8.12801 46.3296 7.43068C48.8124 6.27876 51.3526 5.255 53.9402 4.36345C55.5067 3.82374 57.1839 4.72501 57.6645 6.31063L59.9067 13.7081C60.3873 15.2937 59.4888 16.9621 57.9265 17.514C56.1126 18.1548 54.3274 18.8742 52.5761 19.6703C51.0678 20.356 49.2635 19.7768 48.5103 18.3011L44.9964 11.4161Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M59.1654 5.87227C58.7171 4.27722 59.6456 2.61497 61.2563 2.22678C63.9171 1.58552 66.609 1.08123 69.3214 0.715903C70.9635 0.494742 72.4306 1.7082 72.5901 3.35737L73.334 11.0513C73.4934 12.7005 72.2844 14.1597 70.6441 14.3936C68.7396 14.6652 66.8478 15.0196 64.9742 15.4557C63.3605 15.8314 61.7053 14.9088 61.2569 13.3138L59.1654 5.87227Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M74.096 3.22668C73.9689 1.5747 75.2052 0.126633 76.8607 0.0616167C79.5956 -0.0457823 82.3341 -0.0127659 85.0656 0.160536C86.7191 0.265447 87.92 1.7429 87.7532 3.39133L86.9749 11.0819C86.8081 12.7303 85.3365 13.9243 83.6822 13.8322C81.7614 13.7253 79.8369 13.7021 77.9141 13.7627C76.258 13.8148 74.8157 12.5857 74.6887 10.9337L74.096 3.22668Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M89.1967 3.55119C89.3946 1.9062 90.8897 0.727314 92.5262 0.986739C95.2293 1.41528 97.9087 1.98226 100.554 2.68544C102.155 3.11112 103.044 4.79459 102.559 6.37874L100.294 13.7694C99.809 15.3535 98.1327 16.2373 96.5282 15.824C94.6652 15.3442 92.7822 14.9458 90.8846 14.6298C89.2502 14.3577 88.0756 12.8707 88.2735 11.2257L89.1967 3.55119Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M103.973 6.82702C104.489 5.25251 106.186 4.38886 107.74 4.96338C110.307 5.91241 112.824 6.99255 115.28 8.19955C116.767 8.93023 117.31 10.7552 116.524 12.2138L112.858 19.0186C112.072 20.4772 110.255 21.016 108.762 20.2969C107.029 19.4619 105.261 18.7028 103.461 18.0218C101.912 17.4352 101.051 15.7472 101.567 14.1727L103.973 6.82702Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M117.931 12.9906C118.747 11.5487 120.581 11.0366 121.991 11.9063C124.321 13.3429 126.575 14.898 128.745 16.5657C130.059 17.5752 130.231 19.4714 129.173 20.7464L124.237 26.6947C123.179 27.9697 121.291 28.1396 119.97 27.1403C118.435 25.98 116.851 24.8871 115.222 23.8647C113.818 22.9841 113.307 21.1594 114.123 19.7175L117.931 12.9906Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
        <path
            d="M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847Z"
            fill="#EB2F2F"
            fill-opacity="0.37"
        />
    </svg>
</body>
<script>
  const svg = document.querySelector('svg');
  const blobs = svg.querySelectorAll('path');

  function show(pc) {
    const num = Math.floor(pc / 5);
    for (let i = 0; i < num; i  ) {
      blobs[i].style.fillOpacity = "1";
    }
  }
  show(40);
</script>

  • Related