I am making a website that helps making kufi typography art. Kufi is basically based on grids. it varies by the way the grid is constructed.
regular square grid circular grid
before, I used to make these grids using python’s turtle library. but now I will make it 100% frontend which means i need to handle the graphics using SVG and javascript.
the drawing itself isn’t the problem. the problem is that the drawing isn’t based on paths. it’s based on circles, rectangles and lines.
I need to be able to identify each closed region like illustrator’s live paint bucket does.
illustrator’s live paint bucket
so that it basically looks like pixel art apps where you can hover your mouse on any closed region and it detects it and can color it individually.
A sample of the grids written in svg:
<svg width="1000" height="1000"><circle r="300" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="290" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="270" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="260" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="240" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="230" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="210" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="200" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="180" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="170" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="150" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="140" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="120" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="110" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="90" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="80" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="60" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="50" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="30" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><circle r="20" cx="500" cy="500" fill="none" stroke="black" stroke-width="0.5"></circle><rect x="495" y="200" width="10" height="600" transform="rotate(0, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(18, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(36, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(54, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(72, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(90, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(108, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(126, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(144, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect><rect x="495" y="200" width="10" height="600" transform="rotate(162, 500, 500)" fill="none" stroke="black" stroke-width="0.5"></rect></svg>
I tried to use intersections libraries, but I couldn’t find a way to know which intersection is which. or how to make separate paths of each closed region