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.)

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).

IMAGE :

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.