Day-Night Hover Animated SVG with SMIL

by AntowaKartowa

HTML

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500">
  <!-- 
  Almost identical SVG, except all CSS styles converted 
  to attributes and CSS animations/transitions implemented using
  SMIL syntax. 

  It is very wordy, but possibly could be helpful in some rare scenarios. 
  -->
  <defs>
    <radialGradient id="blue-sky">
      <stop offset="60%" stop-color="hsl(210deg 100% 78%)" />
      <stop offset="85%" stop-color="hsl(210deg 100% 72%)" />
      <stop offset="100%" stop-color="hsl(210deg 100% 68%)" />
    </radialGradient>
    <radialGradient id="night-sky">
      <stop offset="70%" stop-color="hsl(260deg 40% 12%)" />
      <stop offset="85%" stop-color="hsl(266deg 44% 8%)" />
      <stop offset="100%" stop-color="hsl(260deg 100% 2%)" />
    </radialGradient>
    <symbol id="ray" viewBox="0 0 40 85">
      <path d="M20,15 v55" />
    </symbol>
    <symbol id="rays" viewBox="0 0 400 400">
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(45)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(90)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(135)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(180)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(225)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(270)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0" transform-origin="center" transform="rotate(315)"/>
      <use href="#ray" class="ray" width="40" height="85" x="180" y="0"...