Ленточка

Рисуем полупрозрачный квадрат. Поворачиваем его на 45 градусов.

Ribbon

Переводим фигуру в контур через Path | Object to Path. Выбираем инструмент "Узлы" и выделяем три верхних узла, далее нажимаем на кнопку Make selected nodes auto-smooth.

Ribbon

Выделяем два средних узла и поднимаем их немного вверх, удерживая клавишу Ctrl.

Ribbon

Выберите фигуру и уменьшите её по ширине до каплевидной формы.

Ribbon

Продублируйте фигуру и закрасьте ее красным. Продублируйте красную фигуру и закрасьте её зелёным. Немного спустите зелёную каплю вниз, удерживая Ctrl.

Ribbon

Затем потяните зеленую каплю вниз за нижнюю стрелку, удерживая Ctrl. Капля немного увеличится в размерах.

Ribbon

Выделите зелёную и красную каплю и примените Path | Difference.

Ribbon

Продублируйте чёрную каплю, закрасьте её зелёным и опустите под красную фигуру.

Ribbon

Потяните зелёную каплю за нижнюю стрелку, удерживая Ctrl. Капля увеличится в размерах.

Ribbon

Продублируйте чёрную каплю, отразите её по вертикали и опустите вниз, чтобы обе каплю касались своей острой частью.

Ribbon

Дублируем большую зелёную каплю, присоединяем к ней перевёрнутую чёрную каплю и выполняем Path | Intersection.

Ribbon

Затем выберите чёрную каплю и большую зелёную каплю и применяем операцию Path | Difference. Чёрная капля должна находиться выше по уровню над зелёной каплей, чтобы сработало корректно.

Ribbon

Создайте синий прямоугольник чуть больше половины фигуры. Продублируйте его и закрасьте жёлтым. Воспользуйтесь кнопкой Align left edges of objects to right edge of anchor в диалоговом окне Align and Distribute. Сгруппируйте два прямоугольника, добавьте к группе фигуру и нажмите кнопку Center on vertical axis в том же диалоговом окне. Два прямоугольника разделят фигуру пополам.

Ribbon

Снимите группировку у прямоугольников и удалите жёлтый прямоугольник.

Ribbon

Выбираем синий прямоугольник и зелёную каплю, выполняем Path | Intersection.

Ribbon

Выбираем зелёную часть и нижний чёрный ромбик, далее Path | Union.

Ribbon

Мы получили верхнюю часть ленточки.

Продублируйте зелёную часть и отразите её по вертикали и горизонтали. Присоедините копию к нижней части оригинала и объедините обе части через Path | Union.

Ribbon

Выберите инструмент "Узлы". Вы увидите множество узлов в средней части фигуры. Выделите их и удалите. Останутся по три узла в верхней и нижней части фигуры.

Ribbon

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

Выберите зелёную часть и удерживая Ctrl, надвиньте немного на красную часть, чтобы перекрыть участок и закрыть зазор.

Ribbon

Ribbon

Продублируйте зеленую часть и закрасьте её синим цветом. Отразите по горизонтали и присоедините справа.

Для страховки выделите все фигуры и нажмите кнопку Make horizontal gaps between objects equal.

Ribbon

Красную часть фигуры опустите в самый низ, а синюю часть за зеленую.

Рисуем большой квадрат, чтобы виднелись только нижние концы фигуры.

Ribbon

Поворачиваем квадрат на 45 градусов и центрируем по красной части фигуры. Приподнимаем квадрат, чтобы отсечь нижнюю часть фигуры.

Ribbon

Дублируем желтый квадрат, присоединяем к нему синюю часть и выполняем Path | Intersection.

Ribbon

Выбираем жёлтый квадрат и зелёную часть и снова выполняем Path | Intersection. Появилась заготовка ленточки.

Ribbon

Убираем у всех частей ленточки полупрозрачность. Закрашиваем одним цветом. Выбираем переднюю часть ленты и меняем параметры цвета, чтобы показать переднюю и заднюю часть ленты. Аналогично поступаем с верхней частью, чтобы показать тень.

Ribbon

Можно добавить тень от части ленты, которая ложится внахлёст на другую. Для этого выбираем левую часть ленты и дублируем её. Закрасим цветом, как у верхней тёмной части. Помещаем под оригинал. Затем выбираем Path | Outset. Фигура "раздуется" и будет выглядывать из-под левой части ленты. Для увеличения размеров можно нажать комбинацию Ctrl+0.

Ribbon

Дублируем правую часть ленты, присоединяем к ней "раздутую" фигуры и выполняем Path | Intersection. Образуется тень от нахлёста.

Ленточка готова. Далее вы можете менять цвета, чтобы получить разные варианты.

Итоговый результат в SVG.

Источник: Vector Awareness Ribbon

Реклама