scene = `
<g id=grid>
${d3
.ticks(0, 260, 30)
.map(x => `<line x1=${x} x2=${x} y1=0 y2=190 />`)
.join("\n")}
${d3
.ticks(0, 190, 20)
.map(y => `<line x1=0 x2=260 y1=${y} y2=${y} />`)
.join("\n")}
</g>
<g id=start>
<rect class=bbox1 x=${start[0] - start[2] / 2}
y=${start[1] - start[2] / 2}
width=${start[2]}
height=${start[2]}
></rect>
<circle cx=30 cy=30 r=13></circle>
</g>
<g id=end>
<rect class=bbox2 x=${end[0] - end[2] / 2}
y=${end[1] - end[2] / 2}
width=${end[2]} height=${end[2]}></rect>
<g transform="translate(135, 85)">
<path d="${d3
.symbol()
.type(d3.symbolStar)
.size(900)()}"></path>
</g>
</g>
<style>
svg #grid line { stroke: #aaa; stroke-width: 0.5 }
svg .bbox1 { stroke: red; stroke-width: 1; fill: none }
svg .bbox2 { stroke: blue; stroke-width: 1; fill: none }
svg * { vector-effect: non-scaling-stroke }
</style>
`