py-seasonal-hours-clock/example-output.svg

682 lines
31 KiB
XML
Raw Permalink Normal View History

<svg width="700" height="700" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.hour path {stroke: rgb(0, 0, 0); stroke-width: 2px;}
.hour text {stroke: none; fill: rgb(238, 187, 85);}
.hour text.utc {stroke: none; fill: rgb(91, 68, 38);}
.winter path {fill: rgb(70, 62, 108);}
.spring path {fill: rgb(55, 87, 55);}
.summer path {fill: rgb(113, 92, 43);}
.autumn path {fill: rgb(108, 68, 44);}
.local-hour {stroke: none; fill: rgb(238, 187, 85);}
.night-time {stroke: none; fill: rgb(19, 17, 30);}
.blue-hour {stroke: none; fill: rgb(9, 1, 119);}
.golden-hour {stroke: none; fill: rgb(170, 132, 44);}
.day-time {stroke: none; fill: rgb(125, 197, 240);}
.marker {stroke: rgb(19, 17, 30); stroke-width: 2px; fill: none;}
.moon-background {stroke: rgb(170, 170, 170); stroke-width: 2px; fill: rgb(19, 17, 30);}
.moon {stroke: none; fill: rgb(170, 170, 170);}
.sun {stroke: none; fill: rgb(238, 187, 85);}
.dial {stroke-width: 2px; stroke: rgb(238, 187, 85);}
</style>
<defs>
<path id="hour-name-path" d="M 312.1730467792776 62.6757645018362 a 289.803545 289.803545 15 0 1 75.65390644144473 0"></path>
</defs>
<rect x="0" y="0" width="700" height="700" style="stroke: none; fill: rgb(19, 17, 30);"></rect>
<g id="local-clock">
<text
transform="rotate(180, 350.0, 350.0) rotate(0, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">Midnight</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(15, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">1</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(30, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">2</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(45, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">3</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(60, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">4</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(75, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">5</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(90, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">6</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(105, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">7</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(120, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">8</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(135, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">9</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(150, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">10</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(165, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">11</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(180, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">Noon</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(195, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">13</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(210, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">14</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(225, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">15</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(240, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">16</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(255, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">17</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(270, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">18</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(285, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">19</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(300, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">20</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(315, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">21</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(330, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">22</text>
<text
transform="rotate(180, 350.0, 350.0) rotate(345, 350.0, 350.0)"
class="local-hour"
x="350.0"
y="31.88096999999999"
text-anchor="middle"
font-size="16.5">23</text>
</g>
<g id="seasonal-clock" transform="rotate(30.0, 350.0, 350.0)">
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(0, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Candle</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 00</text>
</g>
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(15, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Ice</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 01</text>
</g>
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(30, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Comet</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 02</text>
</g>
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(45, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Thimble</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 03</text>
</g>
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(60, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Root</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 04</text>
</g>
<g class="hour winter" transform="rotate(-172.5, 350.0, 350.0) rotate(75, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Mist</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 05</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(90, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Sprout</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 06</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(105, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Rainbow</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 07</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(120, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Worm</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 08</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(135, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Bud</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 09</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(150, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Blossom</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 10</text>
</g>
<g class="hour spring" transform="rotate(-172.5, 350.0, 350.0) rotate(165, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Ladybug</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 11</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(180, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Geese</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 12</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(195, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Dust</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 13</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(210, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Peach</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 14</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(225, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Fog</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 15</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(240, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Acorn</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 16</text>
</g>
<g class="hour summer" transform="rotate(-172.5, 350.0, 350.0) rotate(255, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Gourd</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 17</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(270, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Soup</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 18</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(285, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Crow</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 19</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(300, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Mushroom</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 20</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(315, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Thunder</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 21</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(330, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Frost</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 22</text>
</g>
<g class="hour autumn" transform="rotate(-172.5, 350.0, 350.0) rotate(345, 350.0, 350.0)">
<path
d="M 309.55397542717907 42.7819425076129 a 309.86903 309.86903 15 0 1 80.89204914564186 0 l -5.238142704197123 39.78764398844654 a 269.73806 269.73806 15 0 0 -70.41576373724762 0 z"></path>
<text
x="350.0"
y="63.54070249999999"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="13.37699"><textPath xlink:href="#hour-name-path" startOffset="50%">Lantern</textPath></text>
<text
transform="rotate(-7.5, 350.0, 350.0)"
class="utc"
x="350.0"
y="95.28533999999998"
text-anchor="middle"
dominant-baseline="mathematical"
font-size="15.0234">U 23</text>
</g>
<circle cx="350.0" cy="350.0" r="239.69126000000003" class="day-time"></circle>
<path
class="golden-hour"
d="M 350.0 350.0
L 116.05469504530768 402.16794427657305
A 239.69126000000003 239.69126000000003 169.29166666666669 1 0 570.178029285408 255.27125283008513
z"></path>
<circle cx="350.0" cy="514.934515" r="10" class="sun" transform="rotate(208.61666666666667, 350.0, 350.0)"></circle>
<path
class="blue-hour"
d="M 350.0 350.0
L 137.1262622524969 460.16656433689354
A 239.69126000000003 239.69126000000003 198.91666666666669 0 0 587.0918462571672 314.795503713937
z"></path>
<path
class="night-time"
d="M 350.0 350.0
L 143.12202233852076 471.0512390646379
A 239.69126000000003 239.69126000000003 204.86666666666665 0 0 588.60109398448 327.1654194302391
z"></path>
<circle cx="350.0" cy="350.0" r="239.69126000000003" class="marker"></circle>
</g>
<g>
<circle cx="350.0" cy="350.0" r="50" class="moon-background"></circle>
<path
class="moon"
d="M 350.0 300.0
C 283.0 306.0, 283.0 394.0, 350.0 400.0
C 318.4132222222222 394.0, 318.4132222222222 306.0, 350.0 300.0"></path>
</g>
<line
style="stroke: red;"
transform="rotate(341.90416666666664, 350.0, 350.0)"
x1="350.0"
y1="579.69126"
x2="350.0"
y2="589.69126"></line>
<line
style="stroke: red;"
transform="rotate(162.00833333333333, 350.0, 350.0)"
x1="350.0"
y1="579.69126"
x2="350.0"
y2="589.69126"></line>
<line
id="dial"
transform="rotate(238.61666666666667, 350.0, 350.0)"
class="dial"
x1="350.0"
y1="504.93451500000003"
x2="350.0"
y2="633.11505"></line>
</svg>