Создание сложных фигур с нуля требует некоторых знаний CSS и SVG, и, возможно, в конечном итоге вам придется корректировать параметры. Я бы рекомендовал использовать некоторые инструменты с графическим интерфейсом, которые предлагают вам пользовательский интерфейс для настройки параметров.
В этой статье я собрал некоторые из моих любимых генераторов форм. Я дополнительно отсортировал их по категориям, таким как блоги, волны, разделители и разное, чтобы было легче ориентироваться, и вы могли выбирать между различными альтернативами в каждой категории.
Для каждого инструмента я приведу прямую ссылку, краткое описание и изображение для предварительного просмотра, чтобы вы могли получить первоначальное впечатление о каждом генераторе и его возможностях на ходу.
Blobs
1. Причудливая форма границы
Укажите восемь значений радиуса границы в CSS и создайте органично выглядящие фигуры.
2. Blobmaker.app
Blobmaker — это бесплатный инструмент генеративного дизайна, который поможет вам быстро создавать случайные и уникальные SVG-фигуры.
3. SVG-shape-generator
Бесплатный инструмент для создания красочных, случайных, уникальных и органично выглядящих SVG-фигур.
4. Squircley.app
Создает красивые формы для логотипов, иконок и фоновых изображений. Экспортирует SVG-файлы, которые можно скопировать в буфер обмена для добавления в ваши проекты.
Волны
5. Волны CSS
Создавайте SVG-волны для вашего следующего дизайна.
6. Многочисленные анимированные волны
Маленький, бесплатный и красивый генератор градиентных волн SVG с простым пользовательским интерфейсом для настройки и стилизации ваших волн в соответствии со спецификациями вашей темы.
7. Генератор SVG-волн
Бесплатный инструмент для создания красочных, многослойных, случайных, уникальных и органично выглядящих SVG-волн.
Разделители
8. Shapedivider.app
Бесплатный инструмент, облегчающий дизайнерам и разработчикам экспорт красивых SVG
фигурный разделитель для их последнего проекта.
9. Shapedividers.com
Создавайте фигурные разделители по оси X или Y. Также есть возможность создания анимированных эффектов.
10. Page-dividers
Часть PWA с 12 инструментами Omatsuri, ориентированными на фронтенд с открытым исходным кодом.
Разное
11. Rad-lines
Проект Vue.js для генерации SVG многоугольников для черчения.
12. Trianglify.io
Инструмент для генерации низкополигональных фонов, текстур и векторов. Он основан на библиотеке с открытым исходным кодом Trianglify.
Писательство всегда было моей страстью, и мне доставляет удовольствие помогать и вдохновлять людей. Если у вас есть вопросы, не стесняйтесь, обращайтесь!
Подключайтесь ко мне в Twitter, LinkedIn и GitHub!
Посетите мой блог, чтобы найти больше статей, подобных этой.