CSS-эффекты и графика

Волнистый круг и лепестки

Круг с волнистым краем или цветок с лепестками для аватарок, иконок и врезок. Форма считается по формуле радиуса, поэтому остаётся ровной при любом числе волн.

Загрузить пример

Заготовки

Настройки

Форма края

Радиус плавно колеблется — край как у монеты.

Волн: 10 Глубина: 14 % Поворот: 0° Точек в контуре: 180 Чем больше точек, тем глаже край и тем длиннее строка CSS. На 180 точках излом уже не виден даже на большом размере.

Чем заполнить

Цвет Второй цвет

Превью

Фигура вписана в квадрат: чтобы получить ровный цветок, задайте блоку одинаковые ширину и высоту, иначе форма растянется вместе с ним.

CSS

.wavy {
  clip-path: polygon(50% 0%, 51.74% 0.24%, 53.43% 0.94%, 55.04% 2.01%, 56.56% 3.35%, 57.97% 4.8%, 59.3% 6.23%, 60.6% 7.48%, 61.91% 8.46%, 63.29% 9.1%, 64.78% 9.39%, 66.41% 9.37%, 68.2% 9.12%, 70.12% 8.75%, 72.12% 8.41%, 74.13% 8.21%, 76.06% 8.29%, 77.84% 8.72%, 79.39% 9.55%, 80.65% 10.77%, 81.61% 12.33%, 82.29% 14.14%, 82.72% 16.11%, 83.01% 18.12%, 83.26% 20.06%, 83.57% 21.83%, 84.05% 23.4%, 84.79% 24.73%, 85.82% 25.84%, 87.16% 26.78%, 88.75% 27.63%, 90.52% 28.45%, 92.34% 29.35%, 94.08% 30.37%, 95.6% 31.58%, 96.79% 32.97%, 97.55% 34.55%, 97.86% 36.28%, 97.72% 38.1%, 97.2% 39.97%, 96.39% 41.82%, 95.45% 43.61%, 94.5% 45.32%, 93.71% 46.94%, 93.18% 48.49%, 93% 50%, 93.18% 51.51%, 93.71% 53.06%, 94.5% 54.68%, 95.45% 56.39%, 96.39% 58.18%, 97.2% 60.03%, 97.72% 61.9%, 97.86% 63.72%, 97.55% 65.45%, 96.79% 67.03%, 95.6% 68.42%, 94.08% 69.63%, 92.34% 70.65%, 90.52% 71.55%, 88.75% 72.38%, 87.16% 73.22%, 85.82% 74.16%, 84.79% 75.27%, 84.05% 76.6%, 83.57% 78.17%, 83.26% 79.94%, 83.01% 81.88%, 82.72% 83.89%, 82.29% 85.86%, 81.61% 87.67%, 80.65% 89.23%, 79.39% 90.45%, 77.84% 91.28%, 76.06% 91.71%, 74.13% 91.79%, 72.12% 91.59%, 70.12% 91.25%, 68.2% 90.88%, 66.41% 90.63%, 64.78% 90.61%, 63.29% 90.9%, 61.91% 91.54%, 60.6% 92.52%, 59.3% 93.77%, 57.97% 95.2%, 56.56% 96.65%, 55.04% 97.99%, 53.43% 99.06%, 51.74% 99.76%, 50% 100%, 48.26% 99.76%, 46.57% 99.06%, 44.96% 97.99%, 43.44% 96.65%, 42.03% 95.2%, 40.7% 93.77%, 39.4% 92.52%, 38.09% 91.54%, 36.71% 90.9%, 35.22% 90.61%, 33.59% 90.63%, 31.8% 90.88%, 29.88% 91.25%, 27.88% 91.59%, 25.87% 91.79%, 23.94% 91.71%, 22.16% 91.28%, 20.61% 90.45%, 19.35% 89.23%, 18.39% 87.67%, 17.71% 85.86%, 17.28% 83.89%, 16.99% 81.88%, 16.74% 79.94%, 16.43% 78.17%, 15.95% 76.6%, 15.21% 75.27%, 14.18% 74.16%, 12.84% 73.22%, 11.25% 72.38%, 9.48% 71.55%, 7.66% 70.65%, 5.92% 69.63%, 4.4% 68.42%, 3.21% 67.03%, 2.45% 65.45%, 2.14% 63.72%, 2.28% 61.9%, 2.8% 60.03%, 3.61% 58.18%, 4.55% 56.39%, 5.5% 54.68%, 6.29% 53.06%, 6.82% 51.51%, 7% 50%, 6.82% 48.49%, 6.29% 46.94%, 5.5% 45.32%, 4.55% 43.61%, 3.61% 41.82%, 2.8% 39.97%, 2.28% 38.1%, 2.14% 36.28%, 2.45% 34.55%, 3.21% 32.97%, 4.4% 31.58%, 5.92% 30.37%, 7.66% 29.35%, 9.48% 28.45%, 11.25% 27.63%, 12.84% 26.78%, 14.18% 25.84%, 15.21% 24.73%, 15.95% 23.4%, 16.43% 21.83%, 16.74% 20.06%, 16.99% 18.12%, 17.28% 16.11%, 17.71% 14.14%, 18.39% 12.33%, 19.35% 10.77%, 20.61% 9.55%, 22.16% 8.72%, 23.94% 8.29%, 25.87% 8.21%, 27.88% 8.41%, 29.88% 8.75%, 31.8% 9.12%, 33.59% 9.37%, 35.22% 9.39%, 36.71% 9.1%, 38.09% 8.46%, 39.4% 7.48%, 40.7% 6.23%, 42.03% 4.8%, 43.44% 3.35%, 44.96% 2.01%, 46.57% 0.94%, 48.26% 0.24%);
}