icon.svg

<svg viewBox="-1 -2 26 26" width="160" height="160" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#fff"/>
      <circle id="eclipse" r="10" cx="33" cy="6">
        <animate id="eclipse-anim-come" fill="freeze" attributeName="cx" to="20" dur="1000ms" begin="3s; eclipse-anim-go.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
        <animate id="eclipse-anim-go" fill="freeze" attributeName="cx" to="33" dur="1000ms" begin="eclipse-anim-come.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      </circle>
    </mask>
  </defs>
  <g id="visible-content">
    <g id="rays" fill="none" stroke="#F5C505" stroke-width="2" stroke-linecap="round" opacity="1">
      <animate id="rays-anim-hide" fill="freeze" attributeName="opacity" to="0" dur="400ms" begin="3s; eclipse-anim-go.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <animate id="rays-anim-show" fill="freeze" attributeName="opacity" to="1" dur="1000ms" begin="eclipse-anim-come.end + 5200ms" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <animateTransform id="rays-anim-rotate" attributeName="transform" attributeType="XML" type="rotate" from="-25 12 12" to="0 12 12" dur="1000ms" begin="eclipse-anim-come.end + 5200ms" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <path d="m12 1v3"/>
      <path d="m23 12h-3"/>
      <path d="m19.778 4.2218-2.121 2.1213"/>
      <path d="m19.778 19.778-2.121-2.121"/>
      <path d="m4.222 19.778 2.121-2.121"/>
      <path d="m4.222 4.222 2.121 2.121"/>
      <path d="m4 12h-3"/>
      <path d="m12 20v3"/>
    </g>
    <circle id="circle" fill="#F5C505" r="5" cx="12" cy="12" mask="url(#mask)">
      <animate id="core-anim-enlarge" fill="freeze" attributeName="r" to="10" dur="1000ms" begin="3s; eclipse-anim-go.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <animate id="core-anim-to-blue" fill="freeze" attributeName="fill" to="#134793" dur="1000ms" begin="3s; eclipse-anim-go.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <animate id="core-anim-shrink" fill="freeze" attributeName="r" to="5" dur="1000ms" begin="eclipse-anim-come.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
      <animate id="core-anim-to-yellow" fill="freeze" attributeName="fill" to="#F5C505" dur="1000ms" begin="eclipse-anim-come.end + 5s" calcMode="spline" keyTimes="0; 1" keySplines="0.37, 0, 0.63, 1"/>
    </circle>
  </g>
</svg>