templates/clock.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="-20 -20 40 40" stroke-linecap="round" stroke="black" fill="white" xmlns="http://www.w3.org/2000/svg">
  <style>
    .epic:hover {
      stroke: darkorchid;
    }

    .legendary:hover {
      stroke: gold;
    }

    text:hover {
      fill-opacity: 1;
    }

    @media (prefers-color-scheme: dark) {
      svg {
        stroke: white;
        fill: black;
        background-color: black;
      }

      text {
        fill: #5cfbe4;
      }
    }
  </style>
  <circle r="19" stroke-width="0.2"/>
  <text y="4" dominant-baseline="middle" text-anchor="middle" stroke="none" fill="lightgrey" fill-opacity="0" font-size="4" font-family="sans-serif"><title>Height</title>{{self.height}}</text>
  <a href="/sat/0°0′0″0‴"><line class="mythic" y1="-16" y2="-15" stroke-width="0.3" stroke="#f2a900"><title>Genesis</title></line></a>
  <a href="/sat/0°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(10.90909090909091)"><title>1st Halving</title></line></a>
  <a href="/sat/0°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(21.81818181818182)"><title>2nd Halving</title></line></a>
  <a href="/sat/0°0′1008″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(32.72727272727273)"><title>3rd Halving</title></line></a>
  <a href="/sat/0°0′1344″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(43.63636363636364)"><title>4th Halving</title></line></a>
  <a href="/sat/0°0′1680″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(54.54545454545455)"><title>5th Halving</title></line></a>
  <a href="/sat/1°0′0″0‴"><line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(65.45454545454545)"><title>1st Conjunction</title></line></a>
  <a href="/sat/1°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(76.36363636363636)"><title>7th Halving</title></line></a>
  <a href="/sat/1°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(87.27272727272728)"><title>8th Halving</title></line></a>
  <a href="/sat/1°0′1008″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(98.18181818181817)"><title>9th Halving</title></line></a>
  <a href="/sat/1°0′1344″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(109.0909090909091)"><title>10th Halving</title></line></a>
  <a href="/sat/1°0′1680″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(120.0)"><title>11th Halving</title></line></a>
  <a href="/sat/2°0′0″0‴"><line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(130.9090909090909)"><title>2nd Conjunction</title></line></a>
  <a href="/sat/2°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(141.8181818181818)"><title>13th Halving</title></line></a>
  <a href="/sat/2°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(152.72727272727272)"><title>14th Halving</title></line></a>
  <a href="/sat/2°0′1008″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(163.63636363636363)"><title>15th Halving</title></line></a>
  <a href="/sat/2°0′1344″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(174.54545454545456)"><title>16th Halving</title></line></a>
  <a href="/sat/2°0′1680″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(185.45454545454544)"><title>17th Halving</title></line></a>
  <a href="/sat/3°0′0″0‴"><line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(196.36363636363635)"><title>3rd Conjunction</title></line></a>
  <a href="/sat/3°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(207.27272727272728)"><title>19th Halving</title></line></a>
  <a href="/sat/3°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(218.1818181818182)"><title>20th Halving</title></line></a>
  <a href="/sat/3°0′1008″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(229.0909090909091)"><title>21st Halving</title></line></a>
  <a href="/sat/3°0′1344″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(240.0)"><title>22nd Halving</title></line></a>
  <a href="/sat/3°0′1680″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(250.90909090909093)"><title>23rd Halving</title></line></a>
  <a href="/sat/4°0′0″0‴"><line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(261.8181818181818)"><title>4th Conjunction</title></line></a>
  <a href="/sat/4°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(272.72727272727275)"><title>25th Halving</title></line></a>
  <a href="/sat/4°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(283.6363636363636)"><title>26th Halving</title></line></a>
  <a href="/sat/4°0′1008″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(294.54545454545456)"><title>27th Halving</title></line></a>
  <a href="/sat/4°0′1344″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(305.45454545454544)"><title>28th Halving</title></line></a>
  <a href="/sat/4°0′1680″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(316.3636363636364)"><title>29th Halving</title></line></a>
  <a href="/sat/5°0′0″0‴"><line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(327.27272727272725)"><title>5th Conjunction</title></line></a>
  <a href="/sat/5°0′336″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(338.1818181818182)"><title>31st Halving</title></line></a>
  <a href="/sat/5°0′672″0‴"><line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(349.0909090909091)"><title>32nd Halving</title></line></a>
  <line y2="-9" transform="rotate({{self.hour}})"><title>Subsidy</title></line>
  <line y2="-13" stroke-width="0.6" transform="rotate({{self.minute}})"><title>Epoch</title></line>
  <line y2="-16" stroke="#d00505" stroke-width="0.2" transform="rotate({{self.second}})"><title>Period</title></line>
  <circle r="0.7" stroke="#d00505" stroke-width="0.3"/>
</svg>