Day-Night Hover Animated SVG

by AntowaKartowa

HTML

<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">
  <style>
    <![CDATA[
    :root {
      --nth: 1;
    }

    #daylight-background {
      transition: opacity .5s ease-in-out .3s;
      opacity: 1;
    }

    #moon {
      transition: opacity .4s ease-in;
      opacity: 0;
    }

    #dark-side {
      --color: hsl(238deg 33% 20%);
      stroke: var(--color);
      fill: var(--color);
    }

    .crater {
      transition: opacity .1s linear .6s;
      fill: hsl(238deg 0% 0%);
      opacity: 0;

      &:nth-child(2) {
        transform: rotate(13deg);
        transform-origin: 165px 220px;
      }
      &:nth-child(3) {
        transform: rotate(-17deg);
        transform-origin: 167.5px 285px;
      }
      &:nth-child(4) {
        transform: scale(1.5, .7) rotate(-55deg);
        transform-origin: 227.5px 350px;
      }
    }

    #sun-moon {
      animation: .7s cubic-bezier(0.4, 0, 0.4, 1) 0s 1 normal forwards running to-360;
      transform-origin: center;
    }

    #arcs {
      transition: d .5s .1s, fill .4s ease-out .2s, stroke .4s ease-out .2s;
      transition-timing-function: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);

      stroke: hsl(45deg 100% 50%);
      fill: hsl(238deg 0% 100% / 1);
    }

    #rays {
      & > .ray {
        transform: rotate(calc(var(--nth) * 45deg));
        transform-origin: center;
      }
    }

    #sun-rays {
      stroke: hsl(45deg 100% 50%);
      stroke-width: 30;
      stroke-dasharray: 40, 100;
      stroke-dashoffset: -60;
      animation: .3s linear .2s 1 normal forwards running rise;
    }

    svg:hover {
      & #daylight-background {
        opacity: 0;
      }

      & #moon {
        opacity:...