<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astral Orrery</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%400%2C400&display=swap");
#root {
--orbit: 0;
--patina: 0;
--illumination: 100;
--counter-orbit: calc((var(--orbit) * (0 - 0.6)));
width: 800px;
height: 800px;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-node-0 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-1 {
position: absolute;
inset: 0;
isolation: isolate;
filter: brightness(calc(var(--illumination) * 1%)) hue-rotate(calc(var(--patina) * 1deg));
}
#root .ga-node-33 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(166 102 38 / 0.35) 0%, rgb(166 102 38 / 0.348996) 2.41%, rgb(166 102 38 / 0.346069) 4.77%, rgb(166 102 38 / 0.341348) 7.09%, rgb(166 102 38 / 0.334961) 9.38%, rgb(166 102 38 / 0.327036) 11.64%, rgb(166 102 38 / 0.3177) 13.86%, rgb(166 102 38 / 0.307083) 16.05%, rgb(166 102 38 / 0.295313) 18.22%, rgb(166 102 38 / 0.282516) 20.37%, rgb(166 102 38 / 0.268823) 22.5%, rgb(166 102 38 / 0.254361) 24.61%, rgb(166 102 38 / 0.239258) 26.7%, rgb(166 102 38 / 0.223642) 28.79%, rgb(166 102 38 / 0.207642) 30.86%, rgb(166 102 38 / 0.191385) 32.93%, rgb(166 102 38 / 0.175) 35%, rgb(166 102 38 / 0.158615) 37.07%, rgb(166 102 38 / 0.142358) 39.14%, rgb(166 102 38 / 0.126358) 41.21%, rgb(166 102 38 / 0.110742) 43.3%, rgb(166 102 38 / 0.095639) 45.39%, rgb(166 102 38 / 0.081177) 47.5%, rgb(166 102 38 / 0.067484) 49.63%, rgb(166 102 38 / 0.054688) 51.78%, rgb(166 102 38 / 0.042917) 53.95%, rgb(166 102 38 / 0.0323) 56.14%, rgb(166 102 38 / 0.022964) 58.36%, rgb(166 102 38 / 0.015039) 60.62%, rgb(166 102 38 / 0.008652) 62.91%, rgb(166 102 38 / 0.003931) 65.23%, rgb(166 102 38 / 0.001004) 67.59%, rgb(166 102 38 / 0) 70%) 250px -200px / 800px 1000px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(23 106 112 / 0.7) 0%, rgb(23 106 112 / 0.697992) 2.41%, rgb(23 106 112 / 0.692139) 4.77%, rgb(23 106 112 / 0.682697) 7.09%, rgb(23 106 112 / 0.669922) 9.38%, rgb(23 106 112 / 0.654071) 11.64%, rgb(23 106 112 / 0.6354) 13.86%, rgb(23 106 112 / 0.614166) 16.05%, rgb(23 106 112 / 0.590625) 18.22%, rgb(23 106 112 / 0.565033) 20.37%, rgb(23 106 112 / 0.537646) 22.5%, rgb(23 106 112 / 0.508722) 24.61%, rgb(23 106 112 / 0.478516) 26.7%, rgb(23 106 112 / 0.447284) 28.79%, rgb(23 106 112 / 0.415283) 30.86%, rgb(23 106 112 / 0.38277) 32.93%, rgb(23 106 112 / 0.35) 35%, rgb(23 106 112 / 0.31723) 37.07%, rgb(23 106 112 / 0.284717) 39.14%, rgb(23 106 112 / 0.252716) 41.21%, rgb(23 106 112 / 0.221484) 43.3%, rgb(23 106 112 / 0.191278) 45.39%, rgb(23 106 112 / 0.162354) 47.5%, rgb(23 106 112 / 0.134967) 49.63%, rgb(23 106 112 / 0.109375) 51.78%, rgb(23 106 112 / 0.085834) 53.95%, rgb(23 106 112 / 0.0646) 56.14%, rgb(23 106 112 / 0.045929) 58.36%, rgb(23 106 112 / 0.030078) 60.62%, rgb(23 106 112 / 0.017303) 62.91%, rgb(23 106 112 / 0.007861) 65.23%, rgb(23 106 112 / 0.002008) 67.59%, rgb(23 106 112 / 0) 70%) -200px -180px / 1100px 1100px no-repeat no-repeat, linear-gradient(rgb(8 28 34 / 1), rgb(8 28 34 / 1)) 0px 0px / 800px 800px no-repeat no-repeat;
}
#root .ga-node-32 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-7 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(calc(var(--orbit) * 1deg));
transform-origin: 50% 50%;
}
#root .ga-node-31 {
position: absolute;
pointer-events: none;
left: 68px;
width: max(0px, 664px);
top: 68px;
height: max(0px, 664px);
}
#root .ga-node-30 {
position: absolute;
pointer-events: none;
left: 77px;
width: max(0px, 646px);
top: 77px;
height: max(0px, 646px);
}
#root .ga-node-29 {
position: absolute;
pointer-events: none;
left: 98.5px;
width: max(0px, 603px);
top: 98.5px;
height: max(0px, 603px);
}
#root .ga-node-28 {
position: absolute;
pointer-events: none;
left: 130px;
width: max(0px, 540px);
top: 130px;
height: max(0px, 540px);
}
#root .ga-node-27 {
position: absolute;
pointer-events: none;
left: 138px;
width: max(0px, 524px);
top: 138px;
height: max(0px, 524px);
}
#root .ga-node-26 {
position: absolute;
pointer-events: none;
left: 170px;
width: max(0px, 460px);
top: 170px;
height: max(0px, 460px);
}
#root .ga-node-25 {
position: absolute;
pointer-events: none;
left: 220px;
width: max(0px, 360px);
top: 220px;
height: max(0px, 360px);
}
#root .ga-node-24 {
position: absolute;
pointer-events: none;
left: 65px;
width: max(0px, 670px);
top: 65px;
height: max(0px, 670px);
}
#root .ga-node-23 {
position: absolute;
pointer-events: none;
left: 175px;
width: max(0px, 450px);
top: 175px;
height: max(0px, 450px);
}
#root .ga-node-21 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(20deg);
transform-origin: 50% 50%;
}
#root .ga-node-22 {
position: absolute;
pointer-events: none;
left: 180px;
width: max(0px, 440px);
top: 82px;
height: max(0px, 636px);
}
#root .ga-node-19 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(80deg);
transform-origin: 50% 50%;
}
#root .ga-node-20 {
position: absolute;
pointer-events: none;
left: 180px;
width: max(0px, 440px);
top: 82px;
height: max(0px, 636px);
}
#root .ga-node-17 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(140deg);
transform-origin: 50% 50%;
}
#root .ga-node-18 {
position: absolute;
pointer-events: none;
left: 180px;
width: max(0px, 440px);
top: 82px;
height: max(0px, 636px);
}
#root .ga-node-15 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-16 {
position: absolute;
pointer-events: none;
left: 80px;
width: max(0px, 640px);
top: 80px;
height: max(0px, 640px);
}
#root .ga-node-13 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(90deg);
transform-origin: 50% 50%;
}
#root .ga-node-14 {
position: absolute;
pointer-events: none;
left: 80px;
width: max(0px, 640px);
top: 80px;
height: max(0px, 640px);
}
#root .ga-node-11 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(180deg);
transform-origin: 50% 50%;
}
#root .ga-node-12 {
position: absolute;
pointer-events: none;
left: 80px;
width: max(0px, 640px);
top: 80px;
height: max(0px, 640px);
}
#root .ga-node-9 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(270deg);
transform-origin: 50% 50%;
}
#root .ga-node-10 {
position: absolute;
pointer-events: none;
left: 80px;
width: max(0px, 640px);
top: 80px;
height: max(0px, 640px);
}
#root .ga-node-8 {
position: absolute;
pointer-events: none;
left: 102px;
width: max(0px, 596px);
top: 102px;
height: max(0px, 596px);
}
#root .ga-node-6 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(82 135 134 / 0.62) 0%, rgb(82 135 134 / 0.618221) 2.41%, rgb(82 135 134 / 0.613037) 4.77%, rgb(82 135 134 / 0.604674) 7.09%, rgb(82 135 134 / 0.593359) 9.38%, rgb(82 135 134 / 0.57932) 11.64%, rgb(82 135 134 / 0.562783) 13.86%, rgb(82 135 134 / 0.543976) 16.05%, rgb(82 135 134 / 0.523125) 18.22%, rgb(82 135 134 / 0.500458) 20.37%, rgb(82 135 134 / 0.476201) 22.5%, rgb(82 135 134 / 0.450582) 24.61%, rgb(82 135 134 / 0.423828) 26.7%, rgb(82 135 134 / 0.396166) 28.79%, rgb(82 135 134 / 0.367822) 30.86%, rgb(82 135 134 / 0.339025) 32.93%, rgb(82 135 134 / 0.31) 35%, rgb(82 135 134 / 0.280975) 37.07%, rgb(82 135 134 / 0.252178) 39.14%, rgb(82 135 134 / 0.223834) 41.21%, rgb(82 135 134 / 0.196172) 43.3%, rgb(82 135 134 / 0.169418) 45.39%, rgb(82 135 134 / 0.143799) 47.5%, rgb(82 135 134 / 0.119542) 49.63%, rgb(82 135 134 / 0.096875) 51.78%, rgb(82 135 134 / 0.076024) 53.95%, rgb(82 135 134 / 0.057217) 56.14%, rgb(82 135 134 / 0.04068) 58.36%, rgb(82 135 134 / 0.026641) 60.62%, rgb(82 135 134 / 0.015326) 62.91%, rgb(82 135 134 / 0.006963) 65.23%, rgb(82 135 134 / 0.001779) 67.59%, rgb(82 135 134 / 0) 70%) 294px 286px / 138px 108px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(20 42 45 / 1) 0%, rgb(9 26 32 / 1) 60%, rgb(32 49 43 / 1) 66%, rgb(255 212 139 / 1) 68%, rgb(254.7762 211.7074 138.7562 / 1) 68.1%, rgb(254.124 210.8545 138.0454 / 1) 68.2%, rgb(253.0719 209.4786 136.8989 / 1) 68.3%, rgb(251.6484 207.6172 135.3477 / 1) 68.4%, rgb(249.8822 205.3075 133.4229 / 1) 68.5%, rgb(247.8018 202.5869 131.1558 / 1) 68.59%, rgb(245.4357 199.4928 128.5773 / 1) 68.69%, rgb(242.8125 196.0625 125.7188 / 1) 68.78%, rgb(239.9608 192.3334 122.6111 / 1) 68.87%, rgb(236.9092 188.3428 119.2856 / 1) 68.96%, rgb(233.6862 184.1281 115.7734 / 1) 69.05%, rgb(230.3203 179.7266 112.1055 / 1) 69.14%, rgb(226.8402 175.1757 108.313 / 1) 69.23%, rgb(223.2744 170.5127 104.4272 / 1) 69.32%, rgb(219.6515 165.775 100.4792 / 1) 69.41%, rgb(216 161 96.5 / 1) 69.5%, rgb(212.3485 156.225 92.5208 / 1) 69.59%, rgb(208.7256 151.4873 88.5728 / 1) 69.68%, rgb(205.1598 146.8243 84.687 / 1) 69.77%, rgb(201.6797 142.2734 80.8945 / 1) 69.86%, rgb(198.3138 137.8719 77.2266 / 1) 69.95%, rgb(195.0908 133.6572 73.7144 / 1) 70.04%, rgb(192.0392 129.6666 70.3889 / 1) 70.13%, rgb(189.1875 125.9375 67.2813 / 1) 70.22%, rgb(186.5643 122.5072 64.4227 / 1) 70.31%, rgb(184.1982 119.4131 61.8442 / 1) 70.41%, rgb(182.1178 116.6925 59.5771 / 1) 70.5%, rgb(180.3516 114.3828 57.6523 / 1) 70.6%, rgb(178.9281 112.5214 56.1011 / 1) 70.7%, rgb(177.876 111.1455 54.9546 / 1) 70.8%, rgb(177.2238 110.2926 54.2438 / 1) 70.9%, rgb(177 110 54 / 1) 71%, rgb(0 0 0 / 0) 72%) 276px 276px / 248px 248px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(239 188 105 / 0.8) 0%, rgb(239 188 105 / 0.797705) 2.41%, rgb(239 188 105 / 0.791016) 4.77%, rgb(239 188 105 / 0.780225) 7.09%, rgb(239 188 105 / 0.765625) 9.38%, rgb(239 188 105 / 0.74751) 11.64%, rgb(239 188 105 / 0.726172) 13.86%, rgb(239 188 105 / 0.701904) 16.05%, rgb(239 188 105 / 0.675) 18.22%, rgb(239 188 105 / 0.645752) 20.37%, rgb(239 188 105 / 0.614453) 22.5%, rgb(239 188 105 / 0.581396) 24.61%, rgb(239 188 105 / 0.546875) 26.7%, rgb(239 188 105 / 0.511182) 28.79%, rgb(239 188 105 / 0.474609) 30.86%, rgb(239 188 105 / 0.437451) 32.93%, rgb(239 188 105 / 0.4) 35%, rgb(239 188 105 / 0.362549) 37.07%, rgb(239 188 105 / 0.325391) 39.14%, rgb(239 188 105 / 0.288818) 41.21%, rgb(239 188 105 / 0.253125) 43.3%, rgb(239 188 105 / 0.218604) 45.39%, rgb(239 188 105 / 0.185547) 47.5%, rgb(239 188 105 / 0.154248) 49.63%, rgb(239 188 105 / 0.125) 51.78%, rgb(239 188 105 / 0.098096) 53.95%, rgb(239 188 105 / 0.073828) 56.14%, rgb(239 188 105 / 0.05249) 58.36%, rgb(239 188 105 / 0.034375) 60.62%, rgb(239 188 105 / 0.019775) 62.91%, rgb(239 188 105 / 0.008984) 65.23%, rgb(239 188 105 / 0.002295) 67.59%, rgb(239 188 105 / 0) 70%) 206px 206px / 388px 388px no-repeat no-repeat;
}
#root .ga-node-5 {
position: absolute;
inset: 0;
isolation: isolate;
transform: rotate(calc(var(--counter-orbit) * 1deg));
transform-origin: 50% 50%;
background: radial-gradient(ellipse at 50% 50%, rgb(212 237 225 / 1) 0%, rgb(211.5496 236.584 224.6213 / 1) 2.37%, rgb(210.2368 235.3716 223.5176 / 1) 4.7%, rgb(208.1191 233.4157 221.7371 / 1) 6.99%, rgb(205.2539 230.7695 219.3281 / 1) 9.25%, rgb(201.6988 227.4861 216.3391 / 1) 11.47%, rgb(197.5112 223.6187 212.8184 / 1) 13.66%, rgb(192.7487 219.2202 208.8142 / 1) 15.82%, rgb(187.4688 214.3438 204.375 / 1) 17.96%, rgb(181.7288 209.0425 199.5491 / 1) 20.08%, rgb(175.5864 203.3696 194.3848 / 1) 22.17%, rgb(169.0991 197.3781 188.9304 / 1) 24.25%, rgb(162.3242 191.1211 183.2344 / 1) 26.32%, rgb(155.3194 184.6517 177.345 / 1) 28.37%, rgb(148.1421 178.0229 171.3105 / 1) 30.42%, rgb(140.8498 171.288 165.1794 / 1) 32.46%, rgb(133.5 164.5 159 / 1) 34.5%, rgb(126.1502 157.712 152.8206 / 1) 36.54%, rgb(118.8579 150.9771 146.6895 / 1) 38.58%, rgb(111.6806 144.3483 140.655 / 1) 40.63%, rgb(104.6758 137.8789 134.7656 / 1) 42.68%, rgb(97.9009 131.6219 129.0696 / 1) 44.75%, rgb(91.4136 125.6304 123.6152 / 1) 46.83%, rgb(85.2712 119.9575 118.4509 / 1) 48.92%, rgb(79.5313 114.6563 113.625 / 1) 51.04%, rgb(74.2513 109.7798 109.1858 / 1) 53.18%, rgb(69.4888 105.3813 105.1816 / 1) 55.34%, rgb(65.3012 101.5139 101.6609 / 1) 57.53%, rgb(61.7461 98.2305 98.6719 / 1) 59.75%, rgb(58.8809 95.5843 96.2629 / 1) 62.01%, rgb(56.7632 93.6284 94.4824 / 1) 64.3%, rgb(55.4504 92.416 93.3787 / 1) 66.63%, rgb(55 92 93 / 1) 69%, rgb(0 0 0 / 0) 71%) 208px 506px / 25px 25px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(255 232 179 / 1) 0%, rgb(233 176 106 / 1) 20%, rgb(232.5439 175.6443 105.7992 / 1) 21.68%, rgb(231.2144 174.6074 105.2139 / 1) 23.34%, rgb(229.0696 172.9348 104.2697 / 1) 24.97%, rgb(226.168 170.6719 102.9922 / 1) 26.57%, rgb(222.5676 167.864 101.4071 / 1) 28.14%, rgb(218.3267 164.5566 99.54 / 1) 29.7%, rgb(213.5035 160.7952 97.4166 / 1) 31.24%, rgb(208.1563 156.625 95.0625 / 1) 32.76%, rgb(202.3432 152.0916 92.5033 / 1) 34.26%, rgb(196.1226 147.2402 89.7646 / 1) 35.75%, rgb(189.5526 142.1165 86.8722 / 1) 37.22%, rgb(182.6914 136.7656 83.8516 / 1) 38.69%, rgb(175.5974 131.2332 80.7284 / 1) 40.15%, rgb(168.3286 125.5645 77.5283 / 1) 41.6%, rgb(160.9434 119.8049 74.277 / 1) 43.05%, rgb(153.5 114 71 / 1) 44.5%, rgb(146.0566 108.1951 67.723 / 1) 45.95%, rgb(138.6714 102.4355 64.4717 / 1) 47.4%, rgb(131.4026 96.7668 61.2716 / 1) 48.85%, rgb(124.3086 91.2344 58.1484 / 1) 50.31%, rgb(117.4474 85.8835 55.1278 / 1) 51.78%, rgb(110.8774 80.7598 52.2354 / 1) 53.25%, rgb(104.6568 75.9084 49.4967 / 1) 54.74%, rgb(98.8438 71.375 46.9375 / 1) 56.24%, rgb(93.4965 67.2048 44.5834 / 1) 57.76%, rgb(88.6733 63.4434 42.46 / 1) 59.3%, rgb(84.4324 60.136 40.5929 / 1) 60.86%, rgb(80.832 57.3281 39.0078 / 1) 62.43%, rgb(77.9304 55.0652 37.7303 / 1) 64.03%, rgb(75.7856 53.3926 36.7861 / 1) 65.66%, rgb(74.4561 52.3557 36.2008 / 1) 67.32%, rgb(74 52 36 / 1) 69%, rgb(0 0 0 / 0) 71%) 567px 249px / 48px 48px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(231 170 87 / 0.6) 0%, rgb(231 170 87 / 0.598279) 2.41%, rgb(231 170 87 / 0.593262) 4.77%, rgb(231 170 87 / 0.585168) 7.09%, rgb(231 170 87 / 0.574219) 9.38%, rgb(231 170 87 / 0.560632) 11.64%, rgb(231 170 87 / 0.544629) 13.86%, rgb(231 170 87 / 0.526428) 16.05%, rgb(231 170 87 / 0.50625) 18.22%, rgb(231 170 87 / 0.484314) 20.37%, rgb(231 170 87 / 0.46084) 22.5%, rgb(231 170 87 / 0.436047) 24.61%, rgb(231 170 87 / 0.410156) 26.7%, rgb(231 170 87 / 0.383386) 28.79%, rgb(231 170 87 / 0.355957) 30.86%, rgb(231 170 87 / 0.328088) 32.93%, rgb(231 170 87 / 0.3) 35%, rgb(231 170 87 / 0.271912) 37.07%, rgb(231 170 87 / 0.244043) 39.14%, rgb(231 170 87 / 0.216614) 41.21%, rgb(231 170 87 / 0.189844) 43.3%, rgb(231 170 87 / 0.163953) 45.39%, rgb(231 170 87 / 0.13916) 47.5%, rgb(231 170 87 / 0.115686) 49.63%, rgb(231 170 87 / 0.09375) 51.78%, rgb(231 170 87 / 0.073572) 53.95%, rgb(231 170 87 / 0.055371) 56.14%, rgb(231 170 87 / 0.039368) 58.36%, rgb(231 170 87 / 0.025781) 60.62%, rgb(231 170 87 / 0.014832) 62.91%, rgb(231 170 87 / 0.006738) 65.23%, rgb(231 170 87 / 0.001721) 67.59%, rgb(231 170 87 / 0) 70%) 548px 230px / 86px 86px no-repeat no-repeat;
}
#root .ga-node-4 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 200px);
top: 0px;
height: max(0px, 200px);
}
#root .ga-node-3 {
position: absolute;
pointer-events: none;
left: 155px;
width: max(0px, 490px);
top: -193px;
height: max(0px, 490px);
}
#root .ga-node-2 {
position: absolute;
pointer-events: none;
left: 195px;
width: max(0px, 410px);
top: 533.5px;
height: max(0px, 410px);
}
</style>
</head>
<body>
<div id="root">
<div class="ga-node-0">
<div class="ga-node-1">
<div class="ga-node-33"></div>
<div class="ga-node-32">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-32" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(228 215 171 / 0.252)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M109.98 145.33l0.18 0 M185.56 18.73l0.18 0 M109.73 98.61l0.18 0 M49.42 155.5l0.18 0 M37.97 145.45l0.18 0 M64.21 186.18l0.18 0 M121.51 68.24l0.18 0 M93.18 40.92l0.18 0 M90.31 153.57l0.18 0 M103.98 135.26l0.18 0 M174.94 122.85l0.18 0 M129.69 30.19l0.18 0 M80.85 190.59l0.18 0 M13.71 78.1l0.18 0 M71.01 182.23l0.18 0 M148.9 77.47l0.18 0 M54.06 49.41l0.18 0 M51.29 45.22l0.18 0 M165.65 14.53l0.18 0 M118.66 165.43l0.18 0 M120.03 94.52l0.18 0 M10.64 147.59l0.18 0 M175.52 87.61l0.18 0 M12.32 112.96l0.18 0 M163.06 49.11l0.18 0 M14.12 22.09l0.18 0 M65.31 39.91l0.18 0 M169.96 38.4l0.18 0 M159.66 185.7l0.18 0 M166.44 36.48l0.18 0 M72.5 106.79l0.18 0 M153.04 190.3l0.18 0 M186.14 136.23l0.18 0 M174.09 21.9l0.18 0 M53.74 166.41l0.18 0 M140.56 145.64l0.18 0 M115.65 105.68l0.18 0 M34.26 132.83l0.18 0 M176.55 85.1l0.18 0 M82.75 135.55l0.18 0 M108.69 73.15l0.18 0 M137.27 154.62l0.18 0 M12.69 74.16l0.18 0 M108.24 82.57l0.18 0 M57.2 108.51l0.18 0"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-32)"/>
</svg>
</div>
<div class="ga-node-7">
<div class="ga-node-31">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-31" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(212 179 119 / 0.48999999999999994)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-31)"/>
</svg>
</div>
<div class="ga-node-30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-30" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(113 152 147 / 0.12600000000000003)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-30)"/>
</svg>
</div>
<div class="ga-node-29">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-29" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(212 179 119 / 0.196)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-29)"/>
</svg>
</div>
<div class="ga-node-28">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-28" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(113 152 147 / 0.12600000000000003)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-28)"/>
</svg>
</div>
<div class="ga-node-27">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-27" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(212 179 119 / 0.196)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-27)"/>
</svg>
</div>
<div class="ga-node-26">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-26" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(113 152 147 / 0.12600000000000003)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-26)"/>
</svg>
</div>
<div class="ga-node-25">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-25" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(212 179 119 / 0.196)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-25)"/>
</svg>
</div>
<div class="ga-node-24">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-24" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(243 211 153 / 0.225)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M187,100L182.6,100 M186.523,109.094L184.534,108.885 M185.099,118.088L183.143,117.672 M182.742,126.884L180.84,126.266 M179.478,135.386L175.459,133.596 M175.344,143.5L173.612,142.5 M170.384,151.137L168.766,149.962 M164.654,158.214L163.167,156.876 M158.214,164.654L155.27,161.384 M151.137,170.384L149.962,168.766 M143.5,175.344L142.5,173.612 M135.386,179.478L134.573,177.651 M126.884,182.742L125.525,178.557 M118.088,185.099L117.672,183.143 M109.094,186.523L108.885,184.534 M100,187L100,185 M90.906,186.523L91.366,182.148 M81.912,185.099L82.328,183.143 M73.116,182.742L73.734,180.84 M64.614,179.478L65.427,177.651 M56.5,175.344L58.7,171.534 M48.863,170.384L50.038,168.766 M41.786,164.654L43.124,163.167 M35.346,158.214L36.833,156.876 M29.616,151.137L33.175,148.551 M24.656,143.5L26.388,142.5 M20.522,135.386L22.349,134.573 M17.258,126.884L19.16,126.266 M14.901,118.088L19.205,117.174 M13.477,109.094L15.466,108.885 M13,100L15,100 M13.477,90.906L15.466,91.115 M14.901,81.912L19.205,82.826 M17.258,73.116L19.16,73.734 M20.522,64.614L22.349,65.427 M24.656,56.5L26.388,57.5 M29.616,48.863L33.175,51.449 M35.346,41.786L36.833,43.124 M41.786,35.346L43.124,36.833 M48.863,29.616L50.038,31.234 M56.5,24.656L58.7,28.466 M64.614,20.522L65.427,22.349 M73.116,17.258L73.734,19.16 M81.912,14.901L82.328,16.857 M90.906,13.477L91.366,17.852 M100,13L100,15 M109.094,13.477L108.885,15.466 M118.088,14.901L117.672,16.857 M126.884,17.258L125.525,21.443 M135.386,20.522L134.573,22.349 M143.5,24.656L142.5,26.388 M151.137,29.616L149.962,31.234 M158.214,35.346L155.27,38.616 M164.654,41.786L163.167,43.124 M170.384,48.863L168.766,50.038 M175.344,56.5L173.612,57.5 M179.478,64.614L175.459,66.404 M182.742,73.116L180.84,73.734 M185.099,81.912L183.143,82.328 M186.523,90.906L184.534,91.115"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-24)"/>
</svg>
</div>
<div class="ga-node-23">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-23" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(118 180 171 / 0.1875)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M186,100L183.14,100 M185.264,111.225L183.975,111.056 M183.07,122.258L181.814,121.922 M179.454,132.911L178.253,132.413 M174.478,143L172.001,141.57 M168.228,152.353L167.197,151.562 M160.811,160.811L159.892,159.892 M152.353,168.228L151.562,167.197 M143,174.478L141.57,172.001 M132.911,179.454L132.413,178.253 M122.258,183.07L121.922,181.814 M111.225,185.264L111.056,183.975 M100,186L100,183.14 M88.775,185.264L88.944,183.975 M77.742,183.07L78.078,181.814 M67.089,179.454L67.587,178.253 M57,174.478L58.43,172.001 M47.647,168.228L48.438,167.197 M39.189,160.811L40.108,159.892 M31.772,152.353L32.803,151.562 M25.522,143L27.999,141.57 M20.546,132.911L21.747,132.413 M16.93,122.258L18.186,121.922 M14.736,111.225L16.025,111.056 M14,100L16.86,100 M14.736,88.775L16.025,88.944 M16.93,77.742L18.186,78.078 M20.546,67.089L21.747,67.587 M25.522,57L27.999,58.43 M31.772,47.647L32.803,48.438 M39.189,39.189L40.108,40.108 M47.647,31.772L48.438,32.803 M57,25.522L58.43,27.999 M67.089,20.546L67.587,21.747 M77.742,16.93L78.078,18.186 M88.775,14.736L88.944,16.025 M100,14L100,16.86 M111.225,14.736L111.056,16.025 M122.258,16.93L121.922,18.186 M132.911,20.546L132.413,21.747 M143,25.522L141.57,27.999 M152.353,31.772L151.562,32.803 M160.811,39.189L159.892,40.108 M168.228,47.647L167.197,48.438 M174.478,57L172.001,58.43 M179.454,67.089L178.253,67.587 M183.07,77.742L181.814,78.078 M185.264,88.775L183.975,88.944"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-23)"/>
</svg>
</div>
<div class="ga-node-21">
<div class="ga-node-22">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-22" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(217 181 119 / 0.36000000000000004)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-22)"/>
</svg>
</div>
</div>
<div class="ga-node-19">
<div class="ga-node-20">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-20" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(217 181 119 / 0.36000000000000004)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-20)"/>
</svg>
</div>
</div>
<div class="ga-node-17">
<div class="ga-node-18">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-18" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(217 181 119 / 0.36000000000000004)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-18)"/>
</svg>
</div>
</div>
<div class="ga-node-15">
<div class="ga-node-16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-16" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(227 194 138 / 0.75)" stroke="rgb(227 194 138 / 0.6)" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 10 L102 25 L100 22 L98 25 Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-16)"/>
</svg>
</div>
</div>
<div class="ga-node-13">
<div class="ga-node-14">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-14" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(227 194 138 / 0.75)" stroke="rgb(227 194 138 / 0.6)" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 10 L102 25 L100 22 L98 25 Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-14)"/>
</svg>
</div>
</div>
<div class="ga-node-11">
<div class="ga-node-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-12" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(227 194 138 / 0.75)" stroke="rgb(227 194 138 / 0.6)" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 10 L102 25 L100 22 L98 25 Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-12)"/>
</svg>
</div>
</div>
<div class="ga-node-9">
<div class="ga-node-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-10" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(227 194 138 / 0.75)" stroke="rgb(227 194 138 / 0.6)" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 10 L102 25 L100 22 L98 25 Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-10)"/>
</svg>
</div>
</div>
<div class="ga-node-8">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<defs>
<pattern id="ga-svg-8" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(185 172 130 / 0.06)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M183,100L130.2,100 M171.88,141.5L151.095,129.5 M141.5,171.88L129.5,151.095 M100,183L100,159 M58.5,171.88L84.9,126.154 M28.12,141.5L48.905,129.5 M17,100L41,100 M28.12,58.5L48.905,70.5 M58.5,28.12L84.9,73.846 M100,17L100,41 M141.5,28.12L129.5,48.905 M171.88,58.5L151.095,70.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-8)"/>
</svg>
</div>
</div>
<div class="ga-node-6"></div>
<div class="ga-node-5"></div>
<div class="ga-node-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="noise">
<defs>
<pattern id="ga-svg-4" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<filter id="ga-svg-4-content" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="3" seed="73" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="linear" slope="1.6" intercept="-0.30000000000000004"/>
<feFuncG type="linear" slope="1.6" intercept="-0.30000000000000004"/>
<feFuncB type="linear" slope="1.6" intercept="-0.30000000000000004"/>
</feComponentTransfer>
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="linear" slope="0.7137254901960784"/>
<feFuncG type="linear" slope="0.8235294117647058"/>
<feFuncB type="linear" slope="0.7411764705882353"/>
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
</filter>
<rect width="100%" height="100%" filter="url(#ga-svg-4-content)" opacity="0.075"/>
</svg>
</pattern>
</defs>
<rect style="x: calc(-200px * 0 / max(0.000001, 200)); width: calc(200px * 800 / max(0.000001, 200)); y: calc(-200px * 0 / max(0.000001, 200)); height: calc(200px * 800 / max(0.000001, 200));" fill="url(#ga-svg-4)"/>
</svg>
</div>
<div class="ga-node-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="A S T R A L O R R E R Y">
<defs>
<pattern id="ga-svg-3" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<text font-family=""Montserrat"" font-size="5" font-weight="400" letter-spacing="0.5" text-anchor="middle" fill="rgb(213 196 156 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="101.75">A S T R A L O R R E R Y</tspan></text>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-3)"/>
</svg>
</div>
<div class="ga-node-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="CELESTIAL MECHANICS / No. 001">
<defs>
<pattern id="ga-svg-2" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<text font-family=""Montserrat"" font-size="5" font-weight="400" letter-spacing="0.5" text-anchor="middle" fill="rgb(139 169 163 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="101.75">CELESTIAL MECHANICS / No. 001</tspan></text>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-2)"/>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>Try different values. Your changes stay in this preview and never change the saved project.
Rotate the entire mechanism; the counterweights turn in the opposite direction.
Travel from antique gold through copper to oxidized teal.
Change the light falling across the enamel.
A miniature celestial instrument in midnight enamel and engraved brass. Turn Orbit to rotate its meridians and counterweights, then shift the metal patina. Open the editor to discover the nested mechanism, eased eclipse, SVG engravings and fine noise.