SVG / Разделы

Разделитель форм SVG: края секций и слои

Создавайте восемь форм разделителей секций SVG, настраивая амплитуду, частоту, высоту, отражение, инвертированную заливку и до трёх слоёв. Просматривайте секцию и копируйте SVG, CSS и HTML.

Разделитель форм SVG: края секций и слои: Выберите край в виде волны, кривой, наклона, треугольника, стрелки, зигзага, облака или горы, настройте его высоту, амплитуду и количество повторов, отразите или инвертируйте его и объедините до трёх слоёв. Разделитель растягивается на любую ширину страницы; скопируйте SVG, CSS для позиционирования или готовую HTML-секцию. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Фигурный разделитель SVGЛокальная обработка

Полностью работает в браузере

Предпросмотр раздела

Немного сменим обстановку.

Фигурный край между двумя разделами.

Разделитель разделов
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
Позиционирование CSS
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
Раздел HTML
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Используйте цвет фона следующего раздела для создания непрерывного края. При перемещении нижнего разделителя наверх отразите его по вертикали.

Замкнутые контуры и координаты

SVG 2 определяет команды closepath и кубических контуров: https://www.w3.org/TR/SVG2/paths.html . Атрибут viewBox сопоставляет эти координаты с областью просмотра: https://www.w3.org/TR/SVG2/coords.html

Откуда берутся фигуры

Для волны используются те же плавные кривые, что и в SVG Wave Generator и SVG Blob Generator; остальные профили строятся по простым формулам. Сторонние изображения не используются, поэтому вы можете свободно применять полученный результат.

Как пользоваться

  1. Выберите форму и настройте её амплитуду, частоту и высоту.
  2. Укажите количество слоёв, прозрачность и цвет, затем выберите край секции и нужные отражения.
  3. Скопируйте SVG, CSS для позиционирования и HTML секции или скачайте SVG.

Конфиденциальность и ограничения

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

Похожие инструменты

SVG-волнаSVG-блобПаттерн CSS

Часто задаваемые вопросы

Как сделать так, чтобы край плавно переходил в другую секцию?

Используйте в качестве заливки разделителя цвет фона этой секции. CSS резервирует место для разделителя и абсолютно позиционирует его у выбранного края.

Чем этот инструмент отличается от инструмента для волн?

В этом инструменте есть семь дополнительных форм, инвертирование и HTML секции. Существующий Генератор волн SVG предлагает случайные волны и дополнительные настройки, предназначенные специально для волн. Генератор органических фигур SVG создаёт независимые органические формы.

Что делает инвертирование?

Инвертирование замыкает контур в направлении верхней, а не нижней части. Разделяющий край остаётся на месте. Вертикальное отражение вместо этого отражает всю форму.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен