Как сделать такой фон для корточки?

Question

[Лина Литвак]

Впервые столкнулась с таким фоном. По началу хотела задать background-repeat: repeat; , но потом поняла, что все кружочки в разные стороны повернуты друг к другу. Делать каждый отдельно - кажется каким-то идиотизмом, писать такой большой и ненужный код. Поделитесь идеями пожалуйста, как избежать большого кода и сделать фон такой же?

Comments

[RAX7]

По началу хотела задать background-repeat: repeat;

Так бы и делала, только нужно слегка поправить фон в Illustrator/figma/любом другом векторном редакторе.
https://www.youtube.com/watch?v=GtTPxP8z4is

[Ankhena]

Я бы вычислила паттерн и сделала бы bg-repeat, как вы и собирались.

Answer 1

[Александр]

Например так. Можно, конечно, сделать JS более гибким, уже на Ваше усмотрение.

Comments

[Лина Литвак]

Спасибо за помощь!) Как раз будет над чем поработать))

[Александр]

Лина Литвак, Можете ещё так попробовать. Радиус уменьшаете до 12 и градиент меняете на:

const gradient = context.createRadialGradient(
    rotationX * radius * 3, rotationY * radius * 3, radius,
    rotationX * radius * 3, rotationY * radius * 3, radius * 4.5
);

[Лина Литвак]

Александр, спасибо!)) все работает!)

Answer 2

[Олег]

Вариант 1 Сделать просто картинкой
Вариант 2 на canvas отрисовать

Comments

[Лина Литвак]

Первый вариант пробовала, вышло не совсем то, сейчас на JS попробую)

Answer 3

[Тынай Бакасов]

Осталось там подправить и добавить rotate.
А так думаю если часок посидеть можно сделать.

Comments

[Лина Литвак]

Спасибо!))
Буду тогда юзать JS для решения этой задачи) хотя до последнего думала, что можно решить на чистом CSS)