how do i get a bunch of squares to look like the border of Croatia?

Question

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.

In what data structure do you currently have the border of Croatia? — dspeyer, Feb 13 '20 at 06:43
Currently I don't have it, since I don't know which would be the best. Any web based data structure would be good — Misko Mali, Feb 13 '20 at 07:04
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. — Robert Longson, Feb 13 '20 at 07:06
@RickDavies how would that allow the square size to be adjusted dynamically? — Robert Longson, Feb 13 '20 at 07:09
@RickDavies there is a [site that would welcome answers from an Adobe Illustrator SME](https://graphicdesign.stackexchange.com/) — Robert Longson, Feb 13 '20 at 07:15
@RobertLongson I'm not sure what that acronym stands for in this instance, but I certainly don't have answers for that exchange, as interesting as it looks, if that's what you are suggesting. The OP certainly might benefit of course, in lieu of an answer from your fine self here — Rick Davies, Feb 13 '20 at 07:27
WIth Adobe I can get a picture not a code. I want to do it in code so it can be flexible and I need to make it interactive — Misko Mali, Feb 13 '20 at 07:29

score 1 · Answer 1 · answered Feb 14 '20 at 08:20

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

how do i get a bunch of squares to look like the border of Croatia?

1 Answers1