Какие инструменты вы бы использовали для создания чего-то подобного?

Любая программа для векторной графики подойдет. Это отдельные круги, вдоль обводки которых расположены вращающиеся квадраты. Первоначальный штрих был удален.

В Inkscape вы легко получите тайлинг, если не видите вредной легкой деформации квадратов. Inkscape создает SVG, если вы сохраняете его как обычный SVG. Вы можете согнуть рисунок вдоль контура. Для этой цели есть расширение «Создать из пути» > «Шаблон вдоль пути». Паттерн представляет собой группу, состоящую из 2 повернутых квадратов:

С некоторыми расчетами вы получите точные заливки. При необходимости можно даже предварительно компенсировать деформацию. Пробовали здесь (=один угол квадратов немного сдвинут):

Результат нормально открывается в Illustrator, что доказывает, что SVG можно использовать в целом, а не только для Inkscape.

Если вы начинаете в Illustrator , вы можете использовать узорчатую кисть так же, как расширение Inkscape «Узор вдоль контура».

В Illustrator есть две версии круга. Оба имеют немного искаженные квадраты, чтобы компенсировать расширение. Это не удалось идеально.

Узорчатая кисть делает квадраты изогнутыми. Правая версия была расширена, чтобы квадраты можно было редактировать. Все они имеют Объект> Контур> Упростить> Прямые линии, чтобы удалить кривизну.

Шумный фон — это отдельный объект. Это может быть фотография. Как вектор это сложно. У меня нет другой идеи сделать его векторным, кроме как трассировать шумную фотографию. Это будет очень тяжелый файл в формате SVG. Я вернусь, если найду правильный путь.

ДОБАВИТЬ: Пользователь joojaa предложил усложнить задачу. Это делает точные, неискаженные квадраты. Самый простой способ получить нужные квадраты с минимальными вычислениями — использовать смешивание. Это совсем не сложнее, чем гнуться по дорожке, нужна только раскраска.

Пример: Нарисуйте квадрат, поверните и сделайте копию немного в стороне (прямо здесь)

Выберите квадраты, определите и сделайте переход. В параметрах наложения выберите количество шагов (=18) и ориентацию = вдоль позвоночника.

Замените корешок кругом. Перед этим вырежьте круг, чтобы открыть путь с помощью инструмента «ножницы».

ADD2: Еще один простой способ получить его без искажений, возможно, самый простой, если вы согласитесь раскрасить результат вручную, — это использовать один квадрат в качестве Дискретной кисти. Просто перетащите квадрат в коллекцию кистей и выберите опцию «Создать точечную кисть». Вы можете определить поведение вращения достаточно гибко:

Это и смешивание должны быть расширены, прежде чем можно будет сделать перекрашивание. Смешивание имеет собственную расширяющуюся запись в меню смешивания (Объект > Смешивание > Расширить). Для кистей используйте Object > Expand Appearance. В обоих случаях результатом является группа. Узорчатая кисть дополнительно создает обтравочную маску, которую необходимо снять перед редактированием.

Это не кажется слишком сложным. В Illustrator просто используйте инструмент поворота с включенным клонированием, возможно, с числовым вводом. Затем используйте повтор последнего преобразования (ctrl+d). Должно быть не менее 5 минут работы.

Простое вращение будет работать в любом редакторе векторных изображений, как уже предположил @joojaa. Я уточню немного больше. Пример ниже был сделан в Inkscape, но он также будет работать с приложениями Illustrator, CorelDraw, Sketch и т. д.

Вот основные шаги.

1. Создайте квадрат, слегка поверните его
2. Дублировать и двигаться вниз по вертикали
3. Сгруппировать оба
4. Дублировать группу
5. Повернуть (в данном примере на 30°)
6. Повторяйте шаги 4 и 5, пока не закончите
7. Измените цвета обводки по мере необходимости

Повторите процесс для постепенно увеличивающихся кругов. Для больших кругов потребуются меньшие углы поворота. Используйте только углы , которые являются коэффициентами 360° . Кроме того, насколько мне известно, все современные программы для редактирования векторных изображений могут экспортировать SVG.