Solution 1 :

It’s usually a mistake to hand-implement low-level graphics primitives like this. Dealing with wavy or nested borders and edge conditions is bug-attracting code.

I’d suggest creating a small HTML canvas, drawing Croatia on it with path primitives and fill, then reading back its content with getImageData. Each fully black pixel corresponds to a square you want to draw. (Size the canvas to ensure this.)

(Or, if you just want the aesthetic, use an SVG pattern fill. That’d be less work.)

Problem :

I decided to use SVGs to generate squares and images I need. SVGs are flexible and that should work with me.

I can’t figure out how can I generate squares to fit inside the border of Croatia. End result I’d like to have can be seen in (see image below).



It’s pretty easy to generate squares in some rectangular shape. Since border of Croatia is not rectangular the only thing I have in mind is to do it manually, but this is not flexible. What if I want to create bigger or smaller squares just to test it out and fit them within borders.


Comment posted by dspeyer

In what data structure do you currently have the border of Croatia?

Comment posted by Misko Mali

Currently I don’t have it, since I don’t know which would be the best. Any web based data structure would be good

Comment posted by Robert Longson

If you have the data as xy points, iterate top to bottom/left to right and start/stop drawing squares whenever you cross a boundary.

Comment posted by Rick Davies

Maybe you should use Adobe Illustrator?

Comment posted by Robert Longson

@RickDavies how would that allow the square size to be adjusted dynamically?