svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" fill="none" stroke="yellow" />
<g transform="translate(${w/2}, ${h/2})">
${array(3).map(i => {
const p = Polygon.fromPath(`M${-r} 0 A ${r} ${r} 0 0 1 ${r} 0 A ${r} ${r} 0 0 1 ${-r} 0 Z`)
const hatches = p.getHatches(PI/4, 3, 2, true)
const c = ['cyan', 'magenta', 'yellow'][i]
return `<g transform="rotate(${120 * i}) translate(100)">
${pathFromHatches(hatches, `stroke="${c}" fill="none"`)}
<circle
stroke="${c}"
fill="none"
r="${r}"
/>
</g>`
}).join('\n')}
</g>
</svg>`