What Tools Would You Use to Build Something Like This?

It’s my first time posting here so please bear with me! I’m trying to recreate the image below but honestly I’m not even sure where to start.

I tried brute forcing it and just overlaying squares on top of the image but that was way too time consuming and it makes tweaking values (square size, circle radius, etc.) very cumbersome.

Are there any tools that I can use to make this and export as an SVG?



Any vector drawing program do. Those are separate circles, which have rotated squares tiled along the stroke. The original stroke has been removed.

In Inkscape you will get the tiling easily, if you do not see a slight deformation of the squares harmful. Inkscape makes SVGs if you save it as plain SVG. You can bend a pattern along a path. There’s extension Create from path > Pattern along Path for this purpose. The pattern is a group which consists 2 rotated squares:

enter image description here

With some calculations you get exact fills. You can even precompensate the deformation, if needed. It’s tried here (=one corner of the squares is moved a little):

enter image description here

The result opens ok in Illustrator, which prover the SVG is generally usable, not only for Inkscape.

If you start in Illustrator, you can use pattern brush in the same way as Inkscape’s extension Pattern along Path.

enter image description here

There are two vesion of a circle in Illustrator. Both have a little distorted squares to compensate the widening. It han’t succeeded perfectly.

Pattern brush makes the squares curved. The right version has been expanded to get the squares editable. All of them have got Object > Path > Simplify > Straight lines to remove the curvature.

The noisy background is a separate object. It can be a photo. As vector it’s complex. I have no other idea to make it as vector than trace a noisy photo. That will be very heavy file as SVG. I’ll return, if I find a proper way.

ADD: User joojaa suggested building it hard way. That makes exact, non-distorted squares. The easiest way to get needed squares with minimal calculations is to use blending. It’s not at all harder than bending along a path, only coloring is needed.

An example: Draw a square, rotate and made a copy a little apart (to right here)

enter image description here

Select the squares, define and make a blend. In the blending options select the number of steps (=18) and orientation = along the spine

Replace the spine with a circle. Before it cut the circle to open path with the scissors tool.

ADD2: Another easy way to get it with no distortion, maybe the easiest, if you accept coloring the result manually, is to use a single square as Scatter brush. Simply drag a square to the brushes collection and select option “create scatter brush”. You can define the rotating behaviour flexible enough:

enter image description here

This and blending must be expanded before one can do the recoloring. Blending has an own expanding entry in the blending menu (Object > Blend >Expand). For brushes use Object > Expand Appearance. In both cases the result is a group. Pattern brush in addition generates a clipping mask which must be released before edits.

Source : Link , Question Author : elfanek , Answer Author : user287001

Leave a Comment