Створення SVG-зображення

Повернутися до лабораторної роботи #4.

Створимо простого стилізованого метелика, використовуючи базові SVG-фігури: еліпси та лінії.

1. Почнемо з базової симетричної форми – два крила та тіло.

<ellipse> - малює крила. Використовуємо два еліпси, дзеркально розміщені.
<rect> - тіло метелика, чорний прямокутник.
<path> - вигнуті лінії-усики.
opacity="0.6" - надає легкий ефект прозорості.

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<!--Ліве крило-->

<ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />
 <!-- Праве крило -->

  <ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />
 <!-- Тіло -->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />
 <!-- Вусики -->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </svg>

2. Додамо метелику візерунки на крила - це можна зробити, намалювавши додаткові форми (наприклад, кружечки або маленькі еліпси) поверх крил.

Додано три кола на кожному крилі різного кольору – це простий візерунок.
Візерунки є симетричними, щоб зберігати рівновагу.
Кольори можна змінювати під власний стиль.

						
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<!--Ліве крило-->

<ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />
 <!--Праве крило-->

  <ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />
 <!--ВІЗЕРУНКИ — Ліве крило -->

  <circle cx="50" cy="80" r="8" fill="pink" />

  <circle cx="60" cy="110" r="6" fill="white" />

  <circle cx="80" cy="90" r="5" fill="yellow" />
 <!--ВІЗЕРУНКИ — Праве крило -->

  <circle cx="150" cy="80" r="8" fill="pink" />

  <circle cx="140" cy="110" r="6" fill="white" />

  <circle cx="120" cy="90" r="5" fill="yellow" />
 <!--Тіло-->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />
 <!--Вусики-->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </svg>

3. Додамо анімацію руху крил, щоб метелик ними "махав". Для цього застосуємо анімацію SVG через тег <animateTransform>, щоб крила помалу рухалися, створюючи ефект помахів.

Як працює анімація

Використовується <animateTransform> всередині кожної групи крила.
Крила трохи обертаються ліворуч і праворуч навколо центру (100 100).
Анімація нескінченно повторюється з інтервалом 2s.

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<!-- Ліва група крила і візерунків -->

<g transform-origin="100 100">

	<g id="leftWing" transform="rotate(0 100 100)">

	<ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	<circle cx="50" cy="80" r="8" fill="pink" />

	<circle cx="60" cy="110" r="6" fill="white" />

	<circle cx="80" cy="90" r="5" fill="yellow" />

	<animateTransform attributeName="transform"

		attributeType="XML"

		type="rotate"

		values="-5 100 100; 5 100 100; -5 100 100"

		dur="2s"

		repeatCount="indefinite"/>

	</g>

</g>
 <!-- Права група крила і візерунків -->

  <g transform-origin="100 100">

	  <g id="rightWing" transform="rotate(0 100 100)">

	  <ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	  <circle cx="150" cy="80" r="8" fill="pink" />

	  <circle cx="140" cy="110" r="6" fill="white" />

	  <circle cx="120" cy="90" r="5" fill="yellow" />

	  <animateTransform attributeName="transform"

		  attributeType="XML"

		  type="rotate"

		  values="5 100 100; -5 100 100; 5 100 100"

		  dur="2s"

		  repeatCount="indefinite"/>

	  </g>

  </g>
 <!-- Тіло -->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />
 <!--Вусики -->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </svg>

4. Додамо рух метелика по діагоналі екрану. Обернемо метелика в <g> (групу) і застосуємо до нього анімацію переміщення за допомогою <animateTransform> типу translate.

Весь <g> з метеликом тепер анімується: переміщається траєкторією 0 0 → 200 100 → 0 0. Це створює ефект польоту.
Можна змінити values, щоб метелик летів іншою траєкторією (наприклад, по колу або зигзагом).

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

<!-- Група метелика -->

<g>

	<!-- Анімація руху метелика -->

	<animateTransform attributeName="transform"

		attributeType="XML"

		type="translate"

		values="0 0; 200 100; 0 0"

		dur="6s"

		repeatCount="indefinite"/>

	<!-- Ліва група крила та візерунків -->

	<g transform-origin="100 100">

	<g id="leftWing" transform="rotate(0 100 100)">

	<ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	<circle cx="50" cy="80" r="8" fill="pink" />

	<circle cx="60" cy="110" r="6" fill="white" />

	<circle cx="80" cy="90" r="5" fill="yellow" />

	<animateTransform attributeName="transform"

	attributeType="XML"

	type="rotate"

	values="-5 100 100; 5 100 100; -5 100 100"

	dur="2s"

	repeatCount="indefinite"/>

	</g>

</g>

<!-- Права група крила та візерунків -->

<g transform-origin="100 100">

	<g id="rightWing" transform="rotate(0 100 100)">

	<ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	<circle cx="150" cy="80" r="8" fill="pink" />

	<circle cx="140" cy="110" r="6" fill="white" />

	<circle cx="120" cy="90" r="5" fill="yellow" />

	<animateTransform attributeName="transform"

	attributeType="XML"

	type="rotate"

	values="5 100 100; -5 100 100; 5 100 100"

	dur="2s"

	repeatCount="indefinite"/>

	</g>

</g>
 <!-- Тіло -->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />
 <!-- Вусики -->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </g>

  </svg>

5. Літаючий метелик по хвилі з крилами, що рухаються.

<path> малює невидиму хвилеподібну лінію, вздовж якої летить метелик .
<animateMotion> + <mpath> прив'язують метелика до цієї траєкторії.
Крила розгойдуються вгору-вниз за допомогою rotate анімації.
rotate = "auto" - метелик злегка повертається в бік руху, як справжній!

<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">

<!-- Опис траекторії (хвиля) -->

<path id="flightPath" d="M 0 150 Q 100 50, 200 150 Q 300 250, 400 150 Q 500 50, 600 150" fill="none" stroke="none"/>
 <!-- Рух метелика -->

<g>

	<animateMotion dur="8s" repeatCount="indefinite" rotate="auto">

	<mpath href="#flightPath" />

	</animateMotion>

	<!-- Лева група крила -->

	<g transform-origin="100 100">

		<g>

		<ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

		<circle cx="50" cy="80" r="8" fill="pink" />

		<circle cx="60" cy="110" r="6" fill="white" />

		<circle cx="80" cy="90" r="5" fill="yellow" />

		<animateTransform attributeName="transform"

			attributeType="XML"

			type="rotate"

			values="-10 100 100; 10 100 100; -10 100 100"

			dur="1s"

			repeatCount="indefinite"/>

		</g>

	</g>

	<!-- Права група крила -->

	<g transform-origin="100 100">

		<g>

		<ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

		<circle cx="150" cy="80" r="8" fill="pink" />

		<circle cx="140" cy="110" r="6" fill="white" />

		<circle cx="120" cy="90" r="5" fill="yellow" />

		<animateTransform attributeName="transform"

			attributeType="XML"

			type="rotate"

			values="10 100 100; -10 100 100; 10 100 100"

			dur="1s"

			repeatCount="indefinite"/>

		</g>

</g>

<!-- Тіло -->

<rect x="95" y="70" width="10" height="60" fill="black" rx="5" />
 <!-- Вусикисики -->

<path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

<path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

</g>

</svg>

6. Метелик, що літає по хвилі, сідає на квітку. Небесний фон з хмарами

Небо та хмари — фон SVG.
Квітка в нижній правій частині, куди сідає метелик.
Траєкторія закінчується прямо на квітці.
fill="freeze" в animateMotion означає, що метелик наприкінці зупиняється.
end="7.5s" у анімації крил - вони перестають махати, коли метелик сів.

<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">

  <!-- Небо -->

  <rect width="100%" height="100%" fill="skyblue" />

  <!-- Хмари -->

  <g fill="white" opacity="0.8">

	  <ellipse cx="100" cy="60" rx="40" ry="20"/>

	  <ellipse cx="130" cy="60" rx="30" ry="20"/>

	  <ellipse cx="115" cy="50" rx="35" ry="15"/>
	 <ellipse cx="400" cy="80" rx="50" ry="25"/>

	  <ellipse cx="430" cy="80" rx="30" ry="20"/>

	  <ellipse cx="415" cy="70" rx="35" ry="15"/>

  </g>

  <!-- Квіти -->

  <g>

	  <circle cx="500" cy="320" r="20" fill="pink"/>

	  <circle cx="485" cy="305" r="8" fill="yellow"/>

	  <circle cx="515" cy="305" r="8" fill="yellow"/>

	  <circle cx="485" cy="335" r="8" fill="yellow"/>

	  <circle cx="515" cy="335" r="8" fill="yellow"/>

	  <circle cx="500" cy="320" r="5" fill="orange"/>

	  <rect x="497" y="320" width="6" height="40" fill="green"/>

  </g>

  <!-- Траєкторія руху -->

  <path id="flightPath" d="M 0 200 Q 150 100, 300 200 Q 450 300, 500 320" fill="none" stroke="none"/>

  <!-- Метелик -->

  <g>

  <animateMotion dur="8s" fill="freeze" rotate="auto">

  <mpath href="#flightPath"/>

  </animateMotion>

  <!-- Ліве крило -->

  <g transform-origin="100 100">

	  <g>

	  <ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	  <circle cx="50" cy="80" r="8" fill="pink" />

	  <circle cx="60" cy="110" r="6" fill="white" />

	  <circle cx="80" cy="90" r="5" fill="yellow" />

	  <animateTransform attributeName="transform"

	  attributeType="XML"

	  type="rotate"

	  values="-10 100 100; 10 100 100; -10 100 100"

	  dur="1s"

	  repeatCount="indefinite"

	  begin="0s"

	  end="7.5s"/>

	  </g>

  </g>

  <!-- Праве крило -->

  <g transform-origin="100 100">

	  <g>

	  <ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

	  <circle cx="150" cy="80" r="8" fill="pink" />

	  <circle cx="140" cy="110" r="6" fill="white" />

	  <circle cx="120" cy="90" r="5" fill="yellow" />

	  <animateTransform attributeName="transform"

	  attributeType="XML"

	  type="rotate"

	  values="10 100 100; -10 100 100; 10 100 100"

	  dur="1s"

	  repeatCount="indefinite"

	  begin="0s"

	  end="7.5s"/>

	  </g>

  </g>

  <!-- Тіло -->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />

  <!-- Вусики -->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </g>

  </svg>

7. Метелик злітає назад і на квітці відкриваються пелюстки

Метелик сідає на квітку, потім злітає назад хвилею.
Пелюстки квітки починають розкриватися після посадки.
Крила метелика при польоті машуть в обидві сторони.

<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">

  <!-- Небо -->

  <rect width="100%" height="100%" fill="skyblue" />

  <!-- Хмари -->

  <g fill="white" opacity="0.8">

	  <ellipse cx="100" cy="60" rx="40" ry="20"/>

	  <ellipse cx="130" cy="60" rx="30" ry="20"/>

	  <ellipse cx="115" cy="50" rx="35" ry="15"/>
	 <ellipse cx="400" cy="80" rx="50" ry="25"/>

	  <ellipse cx="430" cy="80" rx="30" ry="20"/>

	  <ellipse cx="415" cy="70" rx="35" ry="15"/>

  </g>

  <!-- Квіти -->

  <g id="flower">

	  <circle cx="500" cy="320" r="20" fill="pink" />

	  <circle cx="485" cy="305" r="8" fill="yellow">

	  <animate attributeName="r" values="0;8;0" dur="1.5s" begin="8s" repeatCount="indefinite" />

	  </circle>

	  <circle cx="515" cy="305" r="8" fill="yellow">

	  <animate attributeName="r" values="0;8;0" dur="1.5s" begin="8.2s" repeatCount="indefinite" />

	  </circle>

	  <circle cx="485" cy="335" r="8" fill="yellow">

	  <animate attributeName="r" values="0;8;0" dur="1.5s" begin="8.4s" repeatCount="indefinite" />

	  </circle>

	  <circle cx="515" cy="335" r="8" fill="yellow">

	  <animate attributeName="r" values="0;8;0" dur="1.5s" begin="8.6s" repeatCount="indefinite" />

	  </circle>

	  <circle cx="500" cy="320" r="5" fill="orange" />

	  <rect x="497" y="320" width="6" height="40" fill="green" />

  </g>

  <!-- Траєкторії руху -->

  <path id="path1" d="M 0 200 Q 150 100, 300 200 Q 450 300, 500 320" fill="none" stroke="none"/>

  <path id="path2" d="M 500 320 Q 450 250, 300 200 Q 150 100, 0 200" fill="none" stroke="none"/>

  <!-- Метелик -->

  <g>

	  <animateMotion dur="8s" begin="0s" fill="freeze" rotate="auto">

	  <mpath href="#path1"/>

	  </animateMotion>

	  <animateMotion dur="8s" begin="10s" fill="freeze" rotate="auto">

	  <mpath href="#path2"/>

	  </animateMotion>

	  <!-- Ліве крило -->

	  <g transform-origin="100 100">

		  <g>

		  <ellipse cx="70" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

		  <circle cx="50" cy="80" r="8" fill="pink" />

		  <circle cx="60" cy="110" r="6" fill="white" />

		  <circle cx="80" cy="90" r="5" fill="yellow" />

		  <animateTransform attributeName="transform"

		  attributeType="XML"

		  type="rotate"

		  values="-10 100 100; 10 100 100; -10 100 100"

		  dur="1s"

		  repeatCount="indefinite"

		  begin="0s;10s"

		  end="7.5s;17.5s"/>

		  </g>

	  </g>

	  <!-- Праве крило -->

	  <g transform-origin="100 100">

		  <g>

		  <ellipse cx="130" cy="100" rx="50" ry="70" fill="purple" opacity="0.6" />

		  <circle cx="150" cy="80" r="8" fill="pink" />

		  <circle cx="140" cy="110" r="6" fill="white" />

		  <circle cx="120" cy="90" r="5" fill="yellow" />

		  <animateTransform attributeName="transform"

		  attributeType="XML"

		  type="rotate"

		  values="10 100 100; -10 100 100; 10 100 100"

		  dur="1s"

		  repeatCount="indefinite"

		  begin="0s;10s"

		  end="7.5s;17.5s"/>

		  </g>

  </g>

  <!-- Тіло -->

  <rect x="95" y="70" width="10" height="60" fill="black" rx="5" />

  <!-- Вусики -->

  <path d="M 100 70 Q 90 50 85 60" stroke="black" fill="none" />

  <path d="M 100 70 Q 110 50 115 60" stroke="black" fill="none" />

  </g>

  </svg>

Диски для звітності

Корисні контакти

Створення SVG-зображення

Повернутися до лабораторної роботи #4.

Повернутися до лабораторної роботи #4.