exshome

<svg
  xmlns="http://www.w3.org/2000/svg"
  height="300"
  width="300"
  viewBox="0 0 600 600"
  class="w-full h-full"
>
  <defs>
    <radialGradient id="clockBorderGradient">
      <stop offset="95%" stop-color="white" />
      <stop offset="98%" stop-color="gray" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <g id="clock-face">
    <circle cx="300" cy="300" r="300" fill="url('#clockBorderGradient')" />
    <circle class="fill-yellow-50" cx="300" cy="300" r="285" />
    <path
      class="stroke-black stroke-[5]"
      d="
        M 300.5 94
        V 61
        M 506 300.5
        h 32
        M 299.5 506
        v 33
        M 94 299.5
        H 60
        M 411.3 107.8
        l 7.9-13.8
        M 493 189
        l 13 -7.4
        M 492.1 411.4
        l 16.5 9.5
        M 410.5 492.3
        l 8.9 15.3
        M 188.5 492.3
        l -9.2 15.9
        M 107.7 410.3
        L 93 419.5
        M 107.5 188.3
        l -17.1 -9.9
        M 189.7 108.2
        l -9 -15.6
      "
    />
  </g>
  <g
    id="clock-hour"
    transform={
      "rotate(#{clock_hand_rotation(@deps.time.hour, @deps.time.minute / 60, 12)}, 300, 300)"
    }
  >
    <path d="M 300.5 298 V 142" class="stroke-black stroke-[9]" />
  </g>
  <g
    id="clock-minute"
    transform={
      "rotate(#{clock_hand_rotation(@deps.time.minute, @deps.time.second / 60, 60)}, 300, 300)"
    }
  >
    <path d="M 300.5 298 V 67" class="stroke-black stroke-[5]" />
  </g>
  <g
    id="clock-second"
    transform={"rotate(#{clock_hand_rotation(@deps.time.second, 0.0, 60)}, 300, 300)"}
  >
    <path d="M 300.5 298 V 55" class="stroke-red-400 stroke-[4]" />
  </g>
  <circle cx="300" cy="300" r="16.2" />
</svg>