1

Отличаются они ВРОДЕ только цветом, но я не понимаю как их можно сделать более уникальными, и обойтись одним SVG которой я могу просто подставлять цвет.

Еще хотел узнать, почему размер "иконки" 80x80, а вытаскивается 121x121.

body { background-color: #090909; }
<!-- red -->
<svg width="121" height="122" viewBox="0 0 121 122" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_bd_253_4876)">
        <path d="M60 95.625C82.0914 95.625 100 77.7164 100 55.625C100 33.5336 82.0914 15.625 60 15.625C37.9086 15.625 20 33.5336 20 55.625C20 77.7164 37.9086 95.625 60 95.625Z" fill="url(#paint0_linear_253_4876)" />
        <path d="M60.5 95.625C82.3152 95.625 100 77.9402 100 56.125C100 34.3098 82.3152 16.625 60.5 16.625C38.6848 16.625 21 34.3098 21 56.125C21 77.9402 38.6848 95.625 60.5 95.625Z" stroke="white" stroke-opacity="0.6" />
    </g>
    <g opacity="0.4" filter="url(#filter1_d_253_4876)">
        <path d="M60 84.625C76.0163 84.625 89 71.6413 89 55.625C89 39.6087 76.0163 26.625 60 26.625C43.9837 26.625 31 39.6087 31 55.625C31 71.6413 43.9837 84.625 60 84.625Z" fill="url(#paint1_linear_253_4876)" />
    </g>
    <g opacity="0.4" filter="url(#filter2_d_253_4876)">
        <path d="M59.5 80.625C73.5833 80.625 85 69.2083 85 55.125C85 41.0417 73.5833 29.625 59.5 29.625C45.4167 29.625 34 41.0417 34 55.125C34 69.2083 45.4167 80.625 59.5 80.625Z" fill="url(#paint2_linear_253_4876)" />
    </g>
    <g opacity="0.4" filter="url(#filter3_d_253_4876)">
        <path d="M59.5 76.625C71.3741 76.625 81 66.9991 81 55.125C81 43.2509 71.3741 33.625 59.5 33.625C47.6259 33.625 38 43.2509 38 55.125C38 66.9991 47.6259 76.625 59.5 76.625Z" fill="url(#paint3_linear_253_4876)" />
    </g>
    <g opacity="0.4">
        <path d="M60.5 71.625C69.0604 71.625 76 64.6854 76 56.125C76 47.5646 69.0604 40.625 60.5 40.625C51.9396 40.625 45 47.5646 45 56.125C45 64.6854 51.9396 71.625 60.5 71.625Z" fill="url(#paint4_linear_253_4876)" />
    </g>
    <defs>
        <filter id="filter0_bd_253_4876" x="-40" y="-44.375" width="200.5" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feGaussianBlur in="BackgroundImageFix" stdDeviation="30" />
            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_253_4876" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset dy="5" />
            <feGaussianBlur stdDeviation="10" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0" />
            <feBlend mode="normal" in2="effect1_backgroundBlur_253_4876" result="effect2_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter1_d_253_4876" x="21" y="16.625" width="78" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter2_d_253_4876" x="24" y="19.625" width="71" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter3_d_253_4876" x="28" y="23.625" width="63" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <linearGradient id="paint0_linear_253_4876" x1="60" y1="15.625" x2="60" y2="95.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint1_linear_253_4876" x1="60" y1="26.625" x2="60" y2="84.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint2_linear_253_4876" x1="59.5" y1="29.625" x2="59.5" y2="80.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint3_linear_253_4876" x1="59.5" y1="33.625" x2="59.5" y2="76.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint4_linear_253_4876" x1="60.5" y1="40.625" x2="60.5" y2="71.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
    </defs>
</svg>

<!-- green -->
<svg width="121" height="122" viewBox="0 0 121 122" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_bd_253_4933)">
        <path d="M60 95.625C82.0914 95.625 100 77.7164 100 55.625C100 33.5336 82.0914 15.625 60 15.625C37.9086 15.625 20 33.5336 20 55.625C20 77.7164 37.9086 95.625 60 95.625Z" fill="url(#paint0_linear_253_4933)" />
        <path d="M60.5 95.625C82.3152 95.625 100 77.9402 100 56.125C100 34.3098 82.3152 16.625 60.5 16.625C38.6848 16.625 21 34.3098 21 56.125C21 77.9402 38.6848 95.625 60.5 95.625Z" stroke="white" stroke-opacity="0.6" />
    </g>
    <g opacity="0.4" filter="url(#filter1_d_253_4933)">
        <path d="M60 84.625C76.0163 84.625 89 71.6413 89 55.625C89 39.6087 76.0163 26.625 60 26.625C43.9837 26.625 31 39.6087 31 55.625C31 71.6413 43.9837 84.625 60 84.625Z" fill="url(#paint1_linear_253_4933)" />
    </g>
    <g opacity="0.4" filter="url(#filter2_d_253_4933)">
        <path d="M59.5 80.625C73.5833 80.625 85 69.2083 85 55.125C85 41.0417 73.5833 29.625 59.5 29.625C45.4167 29.625 34 41.0417 34 55.125C34 69.2083 45.4167 80.625 59.5 80.625Z" fill="url(#paint2_linear_253_4933)" />
    </g>
    <g opacity="0.4" filter="url(#filter3_d_253_4933)">
        <path d="M59.5 76.625C71.3741 76.625 81 66.9991 81 55.125C81 43.2509 71.3741 33.625 59.5 33.625C47.6259 33.625 38 43.2509 38 55.125C38 66.9991 47.6259 76.625 59.5 76.625Z" fill="url(#paint3_linear_253_4933)" />
    </g>
    <g opacity="0.4" filter="url(#filter4_d_253_4933)">
        <path d="M60.5 71.625C69.0604 71.625 76 64.6854 76 56.125C76 47.5646 69.0604 40.625 60.5 40.625C51.9396 40.625 45 47.5646 45 56.125C45 64.6854 51.9396 71.625 60.5 71.625Z" fill="url(#paint4_linear_253_4933)" />
    </g>
    <defs>
    <filter id="filter0_bd_253_4933" x="-40" y="-44.375" width="200.5" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feGaussianBlur in="BackgroundImageFix" stdDeviation="30" />
        <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_253_4933" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
        <feOffset dy="5" />
        <feGaussianBlur stdDeviation="10" />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0" />
        <feBlend mode="normal" in2="effect1_backgroundBlur_253_4933" result="effect2_dropShadow_253_4933" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_253_4933" result="shape" />
    </filter>
    <filter id="filter1_d_253_4933" x="21" y="16.625" width="78" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
        <feOffset />
        <feGaussianBlur stdDeviation="5" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
    </filter>
    <filter id="filter2_d_253_4933" x="24" y="19.625" width="71" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
        <feOffset />
        <feGaussianBlur stdDeviation="5" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
    </filter>
    <filter id="filter3_d_253_4933" x="28" y="23.625" width="63" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
        <feOffset />
        <feGaussianBlur stdDeviation="5" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
    </filter>
    <filter id="filter4_d_253_4933" x="35" y="30.625" width="51" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
        <feOffset />
        <feGaussianBlur stdDeviation="5" />
        <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
    </filter>
    <linearGradient id="paint0_linear_253_4933" x1="60" y1="15.625" x2="60" y2="95.625" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EFEFEF" stop-opacity="0.6" />
        <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
    </linearGradient>
    <linearGradient id="paint1_linear_253_4933" x1="60" y1="26.625" x2="60" y2="84.625" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EFEFEF" stop-opacity="0.6" />
        <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
    </linearGradient>
    <linearGradient id="paint2_linear_253_4933" x1="59.5" y1="29.625" x2="59.5" y2="80.625" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EFEFEF" stop-opacity="0.6" />
        <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
    </linearGradient>
    <linearGradient id="paint3_linear_253_4933" x1="59.5" y1="33.625" x2="59.5" y2="76.625" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EFEFEF" stop-opacity="0.6" />
        <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
    </linearGradient>
    <linearGradient id="paint4_linear_253_4933" x1="60.5" y1="40.625" x2="60.5" y2="71.625" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EFEFEF" stop-opacity="0.6" />
        <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
    </linearGradient>
    </defs>
</svg>

<!-- White (or no color) -->
<svg width="122" height="121" viewBox="0 0 122 121" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_bd_407_8802)">
    <path d="M60.6546 95.375C82.7575 95.375 100.675 77.4664 100.675 55.375C100.675 33.2836 82.7575 15.375 60.6546 15.375C38.5517 15.375 20.6338 33.2836 20.6338 55.375C20.6338 77.4664 38.5517 95.375 60.6546 95.375Z" fill="url(#paint0_linear_407_8802)"/>
    <path d="M61.1553 95.375C82.9819 95.375 100.676 77.6902 100.676 55.875C100.676 34.0598 82.9819 16.375 61.1553 16.375C39.3287 16.375 21.6348 34.0598 21.6348 55.875C21.6348 77.6902 39.3287 95.375 61.1553 95.375Z" stroke="white" stroke-opacity="0.6"/>
  </g>
  <g opacity="0.4">
    <path d="M60.6548 84.375C76.6794 84.375 89.6699 71.3913 89.6699 55.375C89.6699 39.3587 76.6794 26.375 60.6548 26.375C44.6302 26.375 31.6396 39.3587 31.6396 55.375C31.6396 71.3913 44.6302 84.375 60.6548 84.375Z" fill="url(#paint1_linear_407_8802)"/>
  </g>
  <g opacity="0.4">
    <path d="M60.1539 80.375C74.2445 80.375 85.6672 68.9583 85.6672 54.875C85.6672 40.7917 74.2445 29.375 60.1539 29.375C46.0633 29.375 34.6406 40.7917 34.6406 54.875C34.6406 68.9583 46.0633 80.375 60.1539 80.375Z" fill="url(#paint2_linear_407_8802)"/>
  </g>
  <g opacity="0.4">
    <path d="M60.1548 76.375C72.0351 76.375 81.6659 66.7491 81.6659 54.875C81.6659 43.0009 72.0351 33.375 60.1548 33.375C48.2744 33.375 38.6436 43.0009 38.6436 54.875C38.6436 66.7491 48.2744 76.375 60.1548 76.375Z" fill="url(#paint3_linear_407_8802)"/>
  </g>
  <g opacity="0.4">
    <path d="M61.1546 71.375C69.7194 71.375 76.6626 64.4354 76.6626 55.875C76.6626 47.3146 69.7194 40.375 61.1546 40.375C52.5897 40.375 45.6465 47.3146 45.6465 55.875C45.6465 64.4354 52.5897 71.375 61.1546 71.375Z" fill="url(#paint4_linear_407_8802)"/>
  </g>
  <defs>
    <filter id="filter0_bd_407_8802" x="-39.3662" y="-44.625" width="200.542" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feGaussianBlur in="BackgroundImageFix" stdDeviation="30"/>
      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_407_8802"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="5"/>
      <feGaussianBlur stdDeviation="10"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0"/>
      <feBlend mode="normal" in2="effect1_backgroundBlur_407_8802" result="effect2_dropShadow_407_8802"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_407_8802" result="shape"/>
    </filter>
    <linearGradient id="paint0_linear_407_8802" x1="60.6546" y1="15.375" x2="60.6546" y2="95.375" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EFEFEF" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
    </linearGradient>
    <linearGradient id="paint1_linear_407_8802" x1="60.6548" y1="26.375" x2="60.6548" y2="84.375" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EFEFEF" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
    </linearGradient>
    <linearGradient id="paint2_linear_407_8802" x1="60.1539" y1="29.375" x2="60.1539" y2="80.375" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EFEFEF" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
    </linearGradient>
    <linearGradient id="paint3_linear_407_8802" x1="60.1548" y1="33.375" x2="60.1548" y2="76.375" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EFEFEF" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
    </linearGradient>
    <linearGradient id="paint4_linear_407_8802" x1="61.1546" y1="40.375" x2="61.1546" y2="71.375" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EFEFEF" stop-opacity="0.6"/>
      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
    </linearGradient>
  </defs>
</svg>

9
  • Не рассматривал конкретно код svg этих но они так же поддаются стилизации как и html Commented 29 мар. 2023 в 16:11
  • @DaniilLoban, я пытался разобрать код данных свг, но я не понимаю, где цвет который отвечает за зеленый, красный. #EFEFEF явно к ним не относится, а других hex цветов я не вижу. Commented 29 мар. 2023 в 16:36
  • может проще создать свою и будет проще работать с этим ну и меньше будет по размеру сейчас попробую в ответе Commented 29 мар. 2023 в 16:46
  • @DaniilLoban, если получится, буду очень благодарен. Я бы конечно мог потянуть в проект все три свгшки, но мне кажется, это очень неопитмально. Commented 29 мар. 2023 в 17:33
  • Добавил пример, надеюсь подойдет, для создания svg рекомендую использовать про программу Boxy-SVG Commented 29 мар. 2023 в 17:46

2 ответа 2

1

Сделал небольшой пример за художества не ручаюсь, но думаю будет понятно. Суть решения использовать css-переменные и соответсвующие классы для стилизации, переменные задавать объединяющим классом например .green таким образом навешивая этот класс на нужную нам svg мы применяем к ней цвета.

const colorSelect = document.getElementById("color_select")
const svg = document.querySelector('svg')
colorSelect.onchange = function({target}){
  svg.className.baseVal = target.value
  svg.className.animVal = target.value
}
body { background-color: #090909; }

.gradient1_stop1 {
  stop-color: var(--color-g1-s1)
}
.gradient1_stop2 {
  stop-color: var(--color-g1-s2);
}
.gradient1_stop3 {
  stop-color: var(--color-g1-s3);
}

.green {
  --color-g1-s1: rgba(0, 209, 28, 1);
  --color-g1-s2: rgb(0, 118, 15);
  --color-g1-s3: rgb(255, 255, 255);
}

.red {
  --color-g1-s1: rgba(209, 0 , 28, 1);
  --color-g1-s2: rgb(118, 0, 15);
  --color-g1-s3: rgb(255, 255, 255);
}
<svg class="green" width="121" height="122" viewBox="13.193 9.235 121 121" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <view id="view-1">
      <title>View 1</title>
    </view>
    <radialGradient gradientUnits="userSpaceOnUse" cx="71.141" cy="64.996" r="44.853" id="gradient-0">
      <stop offset="0" style="stop-color: rgba(0, 0, 0, 1)"></stop>
      <stop offset="1" style="stop-color: rgba(0, 0, 0, 1)"></stop>
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" cx="71.141" cy="64.996" r="44.853" id="gradient-1">
      <stop offset="0" class="gradient1_stop1"></stop>
      <stop offset="0.887" class="gradient1_stop2"></stop>
      <stop offset="1" class="gradient1_stop3"></stop>
    </radialGradient>
    <filter id="drop-shadow-filter-0" color-interpolation-filters="sRGB" x="-500%" y="-500%" width="1000%" height="1000%" bx:preset="drop-shadow 1 10 10 8 0.5 rgba(255,255,255,0.3)">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
      <feOffset dx="10" dy="10"></feOffset>
      <feComponentTransfer result="offsetblur">
        <feFuncA id="spread-ctrl" type="linear" slope="1"></feFuncA>
      </feComponentTransfer>
      <feFlood flood-color="rgba(255,255,255,0.3)"></feFlood>
      <feComposite in2="offsetblur" operator="in"></feComposite>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <ellipse style="fill: url(#gradient-1); filter: url(#drop-shadow-filter-0);" cx="71.141" cy="64.996" rx="44.853" ry="44.217"></ellipse>
</svg>
<select id="color_select">
  <option value="green">Зеленая</option>
  <option value="red">Красная</option>
</select>

8
  • 1
    В моем варианте выглядит совсем по другому) Commented 29 мар. 2023 в 17:45
  • Это уже можете применить к своему варианту вытянув все цвета, мне важнее было показать метод решения) Commented 29 мар. 2023 в 17:47
  • Лучше покажите, куда я могу в своем варианте подставить цвет) Commented 29 мар. 2023 в 17:49
  • В вашем варианте конкретно используется <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" /> но тут я Вам уже не помогу по крайней мере мне нужно изучить эту тему самому Commented 29 мар. 2023 в 17:57
  • Как правильно найти материал по поводу SVG? Commented 29 мар. 2023 в 18:01
0

Делается это примерно так, но учитывая, что здесь слишком замудрёные цвета, у вас не получится точно в зелёный превратить. По крайней мере у меня не получилось.
Ещё минус вашего svg, он имеет defs, который вроде как невозможно стилизовать.
А вообще цвета в svg даются через fill и stroke, а размер svg можете изменить при помощи width и height.

body {
  margin: 0;
  background-color: black;
}
svg {
  width: 200px;
  height: 200px;
}

svg:hover g:first-child path:first-child {
  fill: url(#paint1_linear_253_4933);
}
svg:hover g:nth-child(2) path {
  fill: green;
}
svg:hover g:nth-child(3) path {
  fill: green;
}
svg:hover g:nth-child(4) path {
  fill: #006500;
}
svg:hover g:nth-child(5) path {
  fill: green;
}
<svg width="121" height="122" viewBox="0 0 121 122" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_bd_253_4876)">
        <path d="M60 95.625C82.0914 95.625 100 77.7164 100 55.625C100 33.5336 82.0914 15.625 60 15.625C37.9086 15.625 20 33.5336 20 55.625C20 77.7164 37.9086 95.625 60 95.625Z" fill="url(#paint0_linear_253_4876)" />
        <path d="M60.5 95.625C82.3152 95.625 100 77.9402 100 56.125C100 34.3098 82.3152 16.625 60.5 16.625C38.6848 16.625 21 34.3098 21 56.125C21 77.9402 38.6848 95.625 60.5 95.625Z" stroke="white" stroke-opacity="0.6" />
    </g>
    <g opacity="0.4" filter="url(#filter1_d_253_4876)">
        <path d="M60 84.625C76.0163 84.625 89 71.6413 89 55.625C89 39.6087 76.0163 26.625 60 26.625C43.9837 26.625 31 39.6087 31 55.625C31 71.6413 43.9837 84.625 60 84.625Z" fill="url(#paint1_linear_253_4876)" />
    </g>
    <g opacity="0.4" filter="url(#filter2_d_253_4876)">
        <path d="M59.5 80.625C73.5833 80.625 85 69.2083 85 55.125C85 41.0417 73.5833 29.625 59.5 29.625C45.4167 29.625 34 41.0417 34 55.125C34 69.2083 45.4167 80.625 59.5 80.625Z" fill="url(#paint2_linear_253_4876)" />
    </g>
    <g opacity="0.4" filter="url(#filter3_d_253_4876)">
        <path d="M59.5 76.625C71.3741 76.625 81 66.9991 81 55.125C81 43.2509 71.3741 33.625 59.5 33.625C47.6259 33.625 38 43.2509 38 55.125C38 66.9991 47.6259 76.625 59.5 76.625Z" fill="url(#paint3_linear_253_4876)" />
    </g>
    <g opacity="0.4">
        <path d="M60.5 71.625C69.0604 71.625 76 64.6854 76 56.125C76 47.5646 69.0604 40.625 60.5 40.625C51.9396 40.625 45 47.5646 45 56.125C45 64.6854 51.9396 71.625 60.5 71.625Z" fill="url(#paint4_linear_253_4876)" />
    </g>
    <defs>
        <filter id="filter0_bd_253_4876" x="-40" y="-44.375" width="200.5" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feGaussianBlur in="BackgroundImageFix" stdDeviation="30" />
            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_253_4876" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset dy="5" />
            <feGaussianBlur stdDeviation="10" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0" />
            <feBlend mode="normal" in2="effect1_backgroundBlur_253_4876" result="effect2_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter1_d_253_4876" x="21" y="16.625" width="78" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter2_d_253_4876" x="24" y="19.625" width="71" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <filter id="filter3_d_253_4876" x="28" y="23.625" width="63" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
            <feOffset />
            <feGaussianBlur stdDeviation="5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
        </filter>
        <linearGradient id="paint0_linear_253_4876" x1="60" y1="15.625" x2="60" y2="95.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint1_linear_253_4876" x1="60" y1="26.625" x2="60" y2="84.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint2_linear_253_4876" x1="59.5" y1="29.625" x2="59.5" y2="80.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint3_linear_253_4876" x1="59.5" y1="33.625" x2="59.5" y2="76.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
        <linearGradient id="paint4_linear_253_4876" x1="60.5" y1="40.625" x2="60.5" y2="71.625" gradientUnits="userSpaceOnUse">
            <stop stop-color="#EFEFEF" stop-opacity="0.6" />
            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
        </linearGradient>
    </defs>
</svg>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.