Готовим пиццу на SVG

В этой статье мы научимся готовить пиццу, которая должна понравиться любителям SVG.

Тесто

Начнём с теста! Приготовить тесто с помощью SVG гораздо проще чем сделать это с обычным тестом. Нам не нужны яйца, мука, молоко и т.д. Наше тесто будет состоять из радиального градиента и в форме круга:


<radialGradient id="doughGradient">
  <stop class="dough" offset="0%"/>
  <stop class="dough" offset="80%"/>
  <stop class="brownish-side" offset="97%"/>
  <stop class="dough" offset="100%"/>
</radialGradient>

<circle id="dough"
  cx="310" cy="310" r="300"
  style="fill:url(#doughGradient)" />

В CSS определим stop-цвета для градиента:


#doughGradient .brownish-side {
  stop-color: #ff9955
}
#doughGradient .dough {
  stop-color: #ffeeaa
}

Салями

В Северной Америке подкопченые сосиски принято называть пепперони, а в России и Европе — салями. По сути, разница между ними минимальна и на вкус различить их довольно трудно. В данном случае нам потребуется окружность.

В данном случае нам потребуется окружность.


<circle
  cx="50" cy="50"
  r="50"
  class="pepperoni-base"/>

На этой окружности разместим характерные включения жира. Вот пример одного из них:


<path
  d="M23,23 16,30C16,30 16,25 18,24 20,23 23,23 23,23z"
  class="pepperoni-inc"/>

Таких включений должно быть несколько. Если несколько включений имеют один цвет — их можно разместить последовательно внутри одного элемента path внутри параметра d. Обратите внимание, что следующая последовательность цифр должна начинаться только после буквы z.

Оформить окружность можно с помощью вот такой декларации в CSS:


#pepperoni .pepperoni-base {
  fill: #a02c2c;
  stroke-width: 2
}

Для оформления жировых включений можно использовать следующий шаблон:


#pepperoni .pepperoni-inc {
  fill: #782121;
  stroke: none
}

Все что нужно — придумать цвета для этих включений и названия для классов.

Для того чтобы оформление из этих классов подключилось необходимо сгруппировать содержимое внутри элемента g с идентификатором #pepperoni.

В результате получается один кружок салями.

Помидоры

Какая пицца без помидоров? Обычно помидор состоит из контура, на котором размещается несколько фрагментов и в каждом фрагменте разбросаны семена.

Итак, контур:


<path
  d="M 107,52 A 52,48 0 0 1 3,52 52,48 0 1 1 107,52z"
  class="tomato-base"/>

Фрагмент может быть вот таким:


<path
  d="M56,16 57,48C57,48 63,31 70,37 76,44 64,50 64,50L92,48C104,46 96,35 85,23 73,11 55,4 56,16z"
  class="tomato-segment"/>

Их тоже можно записать все в один path-элемент.

Семена помидора тоже можно распределить по фрагментам и записать в path.


<path
  d="M62,38C62,38 59,33 61,31 62,30 63,31 63,31 64,34 62,38 62,38z"
  class="tomato-seed" />

С помощью добавления несложного CSS-кода можно придать оформление нашим помидорам, фрагментам и семенам.


#tomato .tomato-base {
  fill: #ff333f;
  stroke: none
}
#tomato .tomato-segment {
  fill: #d40000;
  stroke: none
}
#tomato .tomato-seed {
  fill: #ffaaaa;
  stroke: none
}

Томат будет выглядеть следующим образом.

Оливки

Прототип оливки можно сделать с помощью следующего SVG-кода:


<path id="olive"
  d="M68,47C68,59 55,63 44,66 32,70 23,59 23,47 23,36 33,26 45,26 57,26 68,36 68,47z" />

Далее с помощью use можно сделать из этого прототипа зеленую и черную версии:


<use
  id="greenOlive"
  xlink:href="#olive" />
<use
  id="blackOlive"
  xlink:href="#olive" />

Серединка у оливок, если мы достали косточку — пустая. Поэтому следующий CSS-код поможет нам в оформлении прототипа:


#olive {
  fill: none;
  stroke-width: 22;
}

Далее можно назначить цвета зеленой и черной версиям:


#greenOlive {
  stroke: #7db000;
}
#blackOlive {
  stroke: #000;
}

В результате получится пара SVG-оливок.

Грибы

В нашу пиццу стоит добавить еще и шампиньонов. Для ускорения процесса есть смысл воспользоваться векторным редактором Inkscape. Контур шампиньона можно сделать следующим:


<path
  d="M 37,63 C 44,67 61,69 68,62 68,52 63,42 66,32 72,26 84,32 88,38 90,42 85,42 83,42 80,47 88,50 92,46 96,41 98,34 97,28 94,16 89,9 77,4 55,0 27,-4 9,13 -1,27 1,47 15,55 21,57 23,46 17,48 12,51 10,43 12,40 15,34 22,30 28,30 38,33 32,52 37,63 z"
  class="champignon-shape"/>

Также у шампиньонов можно нарисовать пластинки.


<path
  d="M11,45C11,30 31,22 50,21 70,20 90,26 89,39 77,31 69,39 66,33 61,25 22,34 11,45z"
  class="champignon-gills"/>

Группируем шампиньон:


<g id="champignon"></g>

Назначаем цвета контуру и жабрам:


#champignon .champignon-shape {
  fill: #f6e5ae
}
#champignon .champignon-gills {
  fill: #957f66
}

SVG-шампиньон готов.

Болгарский перец

Добавим прототип болгарского перца. Его тоже легче нарисовать с помощью Inkscape.


<path
  id="bellPepper"
  d="M 130,140 C 210,120 170,16 110,33 67,-9 31,30 26,35 3.8,57 14,89 28,110 25,140 64,220 130,140 z M 38,42 C 19,47 22,77 34,85 41,94 54,96 64,96 66,100 48,100 46,120 45,140 50,160 71,160 89,170 110,140 110,140 110,120 89,100 100,100 110,100 150,120 150,110 170,97 160,48 120,48 110,48 110,68 96,70 80,45 71,14 38,42 z"/>

Теперь можно использовать этот прототип для создания зеленой, красной и желтой версии перца.


<use
  id="redBellPepper" xlink:href="#bellPepper" />
<use
  id="greenBellPepper" xlink:href="#bellPepper" />
<use
  id="yellowBellPepper" xlink:href="#bellPepper" />

Наши перцы должны быть пустыми внутри. Поэтому определим для прототипа следующий CSS:


#bellPepper {
  fill-rule: evenodd
}

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

Теперь можно назначить цвета перцам:


#redBellPepper {
  fill: #DA251D;
}
#greenBellPepper {
  fill: #008000;
}
#yellowBellPepper {
  fill: #ffcc00;
}

Три SVG-перца готовы.

Чилийский перец

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


<path
  d="M2,17C2,17 20,22 33,23 65,26 52,29 101,23 138,21 196,15 241,12 257,11 256,40 246,41 171,49 68,48 33,37 21,34 2,17 2,17z"
  class="chili-pepper-body"/>

И зеленый хвостик:


<path
  d="M296,2C294,2 257,26 253,23 L250,14C234,25 244,30 249,40L253,32C256,34 316,1 296,2z"
  class="chili-pepper-tail"/>

Соберем его в группу:


<g id="chiliPepper"></g>

И добавим цвет:


#chiliPepper .chili-pepper-body {
  fill: #aa0000
}
#chiliPepper .chili-pepper-tail {
  fill: #008000
}

В результате SVG-перчик можно есть, но он очень острый.