<?xml version="1.0" encoding="utf-8"?>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.0">
<head>
	<title>Exalted castemarks</title>
</head>
<body>
	<svg:svg>
		<svg:g id="top" transform="translate(100,50) scale(5.0)">
			<!--
			<svg:g transform="translate(0,-10)">
				<svg:text font-family="Lucida Sans Unicode,sans-serif" text-anchor="middle">
					dawn&#x263c;
					zenith&#x25cf;
					twilight&#x25d3;
					night&#x25cb;
					eclipse&#x25c9;
				</svg:text>
			</svg:g>
			-->
			<svg:g>
				<!-- the template on which I'll build
				<svg:g opacity="0" fill="red">
					<svg:text font-family="Lucida Sans Unicode,sans-serif"
						text-anchor="middle">
						&#x263c;
						&#x25cf;
						&#x25d3;
						&#x25cb;
						&#x25c9;
					</svg:text>
				</svg:g>
				 -->

				<svg:g transform="translate(0,0)">
					<svg:g id="dawn" fill="black" stroke="black" stroke-width="1" transform="scale(0.75)">
						<svg:circle r="4.2" fill="none"/>
						<svg:path
							d="M-4.2,0 h-2.8 M4.2,0 h2.8 M0,-4.2 v-2.8 M0,4.2 v2.8"/>
						<svg:path transform="rotate(45)"
							d="M-4.2,0 h-2.8 M4.2,0 h2.8 M0,-4.2 v-2.8 M0,4.2 v2.8"/>
					</svg:g>
				</svg:g>

				<svg:g transform="translate(20,0)">
					<svg:g id="zenith" fill="black" stroke="black" stroke-width="0.75">
						<svg:circle r="4.2"/>
					</svg:g>
				</svg:g>

				<svg:g transform="translate(40,0)">
					<svg:g id="twilight" fill="black" stroke="black" stroke-width="0.75">
						<svg:circle r="4.2" fill="none"/>
						<svg:path d="M-4.1,0 A4.1,4.1 0,1,1 4.1,0 z" stroke-width="0"/>
					</svg:g>
				</svg:g>

				<svg:g transform="translate(60,0)">
					<svg:g id="night" fill="black" stroke="black" stroke-width="0.75">
						<svg:circle r="4.2" fill="none"/>
					</svg:g>
				</svg:g>

				<svg:g transform="translate(80,0)">
					<svg:g id="eclipse" fill="black" stroke="black" stroke-width="0.75">
						<svg:circle r="4.2" fill="none"/>
						<svg:circle r="1.7" stroke-width="1"/>
					</svg:g>
				</svg:g>
			</svg:g>

			<svg:g opacity="0.5" fill="none" stroke="black"
				transform="translate (0,10)">
				<svg:path d="M0,0 q20,-5 40,0 q20,5 40,0"/>
				<svg:path d="M0,0 q-20,5 -40,0" stroke-dasharray="2,2"/>
				<svg:path d="M80,0 q20,-5 40,0" stroke-dasharray="2,2"/>
			</svg:g>
		</svg:g>
	</svg:svg>

</body>
</html>
