docs/tile-layout.svg

<svg width="400" height="280" xmlns="http://www.w3.org/2000/svg">
	<rect fill="#fff" x="0" y="0" width="400" height="280" />

	<defs>
		<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
			<stop offset="0%" stop-color="#def"/>
			<stop offset="100%" stop-color="#fff"/>
		</linearGradient>
	</defs>

	<rect fill="url(#gradient)" x="20" y="20" width="360" height="360" />
	<g fill="rgba(255,255,255,0.6)">
		<rect x="140" y="20" width="120" height="120" />
		<rect x="20" y="140" width="120" height="120" />
		<rect x="260" y="140" width="120" height="120" />
		<rect x="140" y="260" width="120" height="120" />
	</g>
	<g stroke-linecap="round" stroke-width="1.5" >
		<g stroke="#9ab">
			<g stroke-dasharray="3 3" stroke-dashoffset="1.5">
				<line x1="20" y1="140" x2="380" y2="140" />
				<line x1="20" y1="260" x2="380" y2="260" />

				<line x1="140" y1="20" x2="140" y2="380" />
				<line x1="260" y1="20" x2="260" y2="380" />
			</g>
			<g stroke-dasharray="3 7" stroke-dashoffset="1.5">
				<line x1="20" y1="50" x2="380" y2="50" />
				<line x1="20" y1="80" x2="380" y2="80" />
				<line x1="20" y1="110" x2="380" y2="110" />
				<line x1="20" y1="170" x2="380" y2="170" />
				<line x1="20" y1="200" x2="380" y2="200" />
				<line x1="20" y1="230" x2="380" y2="230" />

				<line x1="50" y1="20" x2="50" y2="380" />
				<line x1="80" y1="20" x2="80" y2="380" />
				<line x1="110" y1="20" x2="110" y2="380" />
				<line x1="170" y1="20" x2="170" y2="380" />
				<line x1="200" y1="20" x2="200" y2="380" />
				<line x1="230" y1="20" x2="230" y2="380" />
				<line x1="290" y1="20" x2="290" y2="380" />
				<line x1="320" y1="20" x2="320" y2="380" />
				<line x1="350" y1="20" x2="350" y2="380" />
			</g>
		</g>
		<g stroke="#000">
			<line x1="20" y1="20" x2="380" y2="20" />
			<line x1="20" y1="20" x2="20" y2="380" />
			<line x1="380" y1="20" x2="380" y2="380" />
		</g>
	</g>
	<g stroke-width="2.5" stroke="#000" stroke-linecap="round" fill="none">
		<path d="M 35 35 h 90 l -90 30 h 90 l -90 30 h 90 l -90 30 h 90 l 30 -90 h 90 l -90 30 h 90 l -90 30 h 90 l -90 30 h 90 l 30 -90 h 90 l -90 30 h 90 l -90 30 h 90 l -90 30 h 90 l -330 30 h 90 l -90 30 h 90 l -90 30h 60"/>
		<line x1="95" y1="215" x2="90" y2="210" />
		<line x1="95" y1="215" x2="90" y2="220" />
	</g>
	<ellipse fill="#000" cx="35" cy="35" rx="5" ry="5" />
</svg>