Градиентная сетка

Мягкие цветные пятна, плавно перетекающие одно в другое, — самый узнаваемый фон последнего десятилетия: обои смартфонов, заставки операционных систем, иконки приложений, сайты стартапов. В векторных редакторах такой фон рисуют градиентной сеткой, отсюда и название. Здесь та же эстетика получается математически — и никогда не проваливается в грязно-серое пятно посередине.

Как это устроено

На полотно ставятся «Пятна» — от 3 до 16 цветных точек. Чтобы они не сбивались в кучу, координаты берутся из квазислучайной последовательности R₂, построенной на «пластическом числе» ρ ≈ 1,3247, родственнике золотого сечения, а цвета — из палитры с шагом золотого сечения. Цвет пикселя — среднее цветов всех точек с гауссовыми весами: чем ближе точка, тем больше её вклад.

Смешивают не в RGB, а в OKLab — цветовом пространстве, где равные шаги чисел выглядят равными для глаза. В RGB синий и жёлтый встречаются в тусклом сером, в OKLab переход остаётся чистым и ровным по светлоте. Когда «Мягкость» стремится к нулю, вес ближайшей точки подавляет остальные, и градиент превращается в диаграмму Вороного с размытыми швами. «Изгиб» сдвигает координаты медленным шумом, чтобы границы пятен плыли органично, а не по окружностям. «Насыщенность» умножает хрому, «Контраст» раздвигает светлоту пятен вокруг средней. В анимации каждая точка скользит по своей фигуре Лиссажу с целым числом оборотов, и петля замыкается; в тайле расстояния считаются до ближайших копий точек. Результат дизерится, поэтому на плавных переходах не бывает полос-ступенек.

Немного истории

Инструмент «Градиентная сетка» появился в Adobe Illustrator 8 в 1998 году: на фигуру натягивают сетку и назначают цвет каждому узлу. Математически это лоскуты-патчи, какие Стивен Кунс придумал для компьютерного проектирования в 1960-х; в формате PDF они так и называются — сетки патчей Кунса. Долгие годы сетку использовали ради фотореалистичной векторной графики, пока в 2010-х размытые цветовые пятна не стали самостоятельным стилем; в 2024 году Apple добавила MeshGradient прямо в SwiftUI. Пространство OKLab, в котором смешивает цвета этот слой, предложил Бьёрн Оттоссон в 2020 году, и уже через несколько лет оно появилось в CSS.

Что покрутить

• 4–6 пятен, «Мягкость» 0,85–0,95 и палитра из соседних оттенков (гармония «аналоги») — спокойные обои для телефона.
• «Мягкость» 0,1–0,3 — цветные поля с мягкими швами, почти абстрактная живопись.
• «Изгиб» 0,6–1 вытягивает пятна в языки пламени и волны.
• «Насыщенность» 0,6–0,8 — пастель, 1,4 и выше — кислотные цвета.
• Добавьте сверху эффект «Зерно» — выйдет модный «зернистый градиент»; с петлёй анимации в 20–30 секунд это готовая заставка для «Живого режима».