Home Work 13

SVG фігури з CSS-анімацією

Ця сторінка демонструє базову роботу з Scalable Vector Graphics: квадрат, прямокутник, коло й еліпс, окремі кольори заливки та контуру, а також плавну анімацію однієї фігури через CSS-клас.

SVG: <rect>, <circle>, <ellipse> Доступність: <title> + <desc> Анімація: CSS @keyframes

Практична частина

Усі фігури намальовані всередині одного SVG-полотна. Кожна має власні кольори заливки та обводки товщиною 5px, а еліпс додатково анімований.

Набір SVG-фігур для домашнього завдання 13 На полотні розташовані квадрат, прямокутник, коло та еліпс з різними кольорами. Еліпс плавно змінює колір заливки та контуру.
Еліпс анімований через CSS-клас .animated-ellipse і ключові кадри @keyframes color-shift.

Що виконано в цьому ДЗ

  • Створено квадрат, прямокутник, коло та еліпс через нативні SVG-теги.
  • Для кожної фігури задано індивідуальні кольори заливки та контуру.
  • Для всіх контурів використано товщину 5px.
  • Додано CSS-анімацію для еліпса зі зміною кольору контуру і фону.
  • Покращено доступність за допомогою aria-labelledby, title та desc.