Skip to content

Instantly share code, notes, and snippets.

@gaperton

gaperton/watchface.gui

Created February 10, 2020 19:01
Show Gist options
  • Save gaperton/c03a912605ded15a1939a2ff1d84fdd6 to your computer and use it in GitHub Desktop.
Save gaperton/c03a912605ded15a1939a2ff1d84fdd6 to your computer and use it in GitHub Desktop.
Download ZIP
Watchface
Raw
watchface.gui
<svg>
<section x="50%" y="50%">
<section width="95%" height="95%">
<g transform="rotate(30)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(60)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(90)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(120)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(150)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(180)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(210)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(240)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(270)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(300)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(330)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(360)">
<line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
</g>
<g transform="rotate(6)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(12)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(18)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(24)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(36)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(42)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(48)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(54)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(66)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(72)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(78)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(84)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(96)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(102)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(108)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(114)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(126)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(132)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(138)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(144)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(156)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(162)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(168)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(174)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(186)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(192)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(198)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(204)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(216)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(222)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(228)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(234)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(246)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(252)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(258)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(264)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(276)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(282)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(288)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(294)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(306)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(312)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(318)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(324)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(336)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(342)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(348)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
<g transform="rotate(354)">
<line x1="0" x2="0" y1="-50%" y2="-50%+5" fill="#A0A0A0"></line>
</g>
</section>
<g id="hours">
<line x1="0" x2="0" y1="-25%" y2="5%" fill="white"></line>
</g>
<g id="minutes">
<line x1="0" x2="0" y1="-40%" y2="8%" fill="white"></line>
</g>
</section>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment