Прелоадер иконки атома в SVG

237

19 июля 2021, 13:00

Надо сделать заливку цвета прелоадера как тут вот так

Скачать от туда не получилось к сожалению.

<svg version="1.1" id="Layer_1"   x="0px" y="0px" 
      viewBox="0 0 350 350" enable-background="new 0 0 100 100" > 
    <g> 
      <path fill="#9D1F60" d="M50,33c24.8,0,42,9,42,17c0,4-4.2,8.2-11.4,11.4C72.5,65,61.6,67,50,67C25.2,67,8,58,8,50 
        c0-4,4.2-8.2,11.4-11.4C27.5,35,38.4,33,50,33 M50,30C25.1,30,5,39,5,50s20.1,20,45,20s45-9,45-20S74.9,30,50,30L50,30z"/> 
    </g> 
    <g> 
      <path fill="#9D1F60" d="M67.5,9.8v3c1.3,0,2.5,0.3,3.5,0.9c3.5,2,5,7.7,4.2,15.6c-0.9,8.8-4.6,19.2-10.5,29.3 
        C53.8,77.4,40.3,87.2,32.5,87.2c-1.3,0-2.5-0.3-3.5-0.9c-3.5-2-5-7.7-4.2-15.6c0.9-8.8,4.6-19.2,10.5-29.3 
        c10.9-18.9,24.4-28.7,32.2-28.7L67.5,9.8 M67.5,9.8c-10,0-24.3,12.1-34.8,30.2c-12.4,21.5-14.7,43.4-5.2,49c1.5,0.9,3.2,1.3,5,1.3 
        c10,0,24.3-12.1,34.8-30.2c12.4-21.5,14.7-43.4,5.2-49C71,10.2,69.3,9.8,67.5,9.8L67.5,9.8z"/> 
    </g> 
    <g> 
      <path fill="#9D1F60" d="M32.5,12.8L32.5,12.8c7.8,0,21.3,9.9,32.2,28.7C77.1,62.9,78,82.4,71,86.4c-1,0.6-2.2,0.9-3.5,0.9 
        c-7.8,0-21.3-9.9-32.2-28.7C22.9,37.1,22,17.6,29,13.6C30,13,31.2,12.8,32.5,12.8 M32.5,9.8c-1.8,0-3.5,0.4-5,1.3 
        c-9.6,5.5-7.2,27.4,5.2,49c10.5,18.2,24.8,30.2,34.8,30.2c1.8,0,3.5-0.4,5-1.3c9.6-5.5,7.2-27.4-5.2-49 
        C56.8,21.8,42.5,9.8,32.5,9.8L32.5,9.8z"/> 
    </g> 
    <g> 
      <circle fill="#9D1F60" cx="50" cy="50" r="10"/> 
    </g> 
</svg>

Answer 1

Вроде похоже

function setValue(v) { // 0 - 100 
  let size = 75; 
  maskRect.setAttribute('y', size/2 - v/100*size); 
  text.innerHTML = v.toFixed(0) 
} 
 
addEventListener('mousemove', e => { 
  let v = (e.y - 30)/(innerHeight - 60); 
  setValue(Math.min(1, Math.max(v, 0))*100); 
})

<body style="margin:0;overflow:hidden"> 
<svg viewBox="-75 -75 150 150" width=100vw height=100vh> 
  <defs> 
    <mask id=mask> 
      <rect id=maskRect x=-45 y=-37 width=90 height=90 fill=white></rect> 
    </mask> 
  </defs> 
  <g fill=none stroke="lightgray" stroke-width=6> 
    <circle fill="lightgray" r="11" stroke=none /> 
    <ellipse rx=40 ry=15></ellipse> 
    <ellipse rx=40 ry=15 transform="rotate(60)"></ellipse> 
    <ellipse rx=40 ry=15 transform="rotate(-60)"></ellipse> 
  </g> 
  <g fill=none stroke="#9D1F60" stroke-width=3 mask=url(#mask)> 
    <circle fill="#ecb660" r="9" stroke=none /> 
    <ellipse rx=40 ry=15></ellipse> 
    <ellipse rx=40 ry=15 transform="rotate(60)"></ellipse> 
    <ellipse rx=40 ry=15 transform="rotate(-60)"></ellipse> 
  </g> 
  <text id=text font-size=10 dominant-baseline=middle  
        text-anchor=middle fill="#9D1F60" y=1>0</text> 
</svg> 
</body>