Сгенерируйте плавную «кляксу» (blob) в формате SVG с настройкой числа точек, неровности и цвета. Готовый SVG-код для копирования.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path fill="#157a54" d="M148.0,127.7 Q132.0,155.4 100.0,155.4 Q68.0,155.4 52.0,127.7 Q36.0,100.0 52.0,72.3 Q68.0,44.6 100.0,44.6 Q132.0,44.6 148.0,72.3 Q164.0,100.0 148.0,127.7 Z" /> </svg>
Блоб (blob) — плавная органичная фигура без острых углов. Такие формы популярны в современном веб-дизайне: их используют как фон, маски для фото, декоративные пятна и акценты. В формате SVG блоб масштабируется без потери качества и весит немного.
Число точек определяет сложность контура, параметр неровности — насколько фигура «рваная». Каждое нажатие даёт новый случайный вариант, поэтому легко подобрать подходящую форму. Готовый SVG-код копируется и вставляется прямо в разметку.
Да, цвет задаётся в инструменте и попадает в SVG-код. Позже его легко изменить в самом SVG через атрибут fill.
SVG — векторный формат: блоб остаётся чётким при любом размере и весит мало. PNG пришлось бы экспортировать под каждый размер.
Скопируйте SVG-код и вставьте в HTML, либо сохраните как .svg файл и подключите как картинку или фон.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.