Домашнє завдання №13. Мистецтво SVG: фігури та анімація

HTML:

<svg width="300" height="300" class="square">
    <rect x="25" y="25" width="220" height="220" fill="#9BBFF8" stroke="#FAC1FA" stroke-width="30">
/svg>

CSS анімація (працює при наведенні):

.square rect:hover {
  animation: background-change;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes background-change {
  50% {
    fill: #FAC1FA;
    stroke: #9BBFF8;
  }
}

HTML:

<svg width="300" height="300" class="rectangle">
    <rect x="100" y="5" width="100" height="290" fill="#7FA658" stroke="#e3655b" stroke-width="5">
/svg>

CSS анімація (працює при наведенні на центр фігури):

.rectangle rect:hover {
  animation: turn;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes turn {
  0% {
    x: 100;
    y: 5;
  }
  25% {
    x: 100;
    y: -295;
    transform: rotate(90deg);
  }
  50% {
    x: -200;
    y: -295;
    transform: rotate(180deg);
  }
  75% {
    x: -200;
    y: 5;
    transform: rotate(270deg);
  }
  100% {
    x: 100;
    y: 5;
    transform: rotate(360deg);
  }
}

HTML:

<svg width="300" height="300" class="circle">
    <circle cx="150" cy="150" r="145" stroke="#FDABAB" stroke-width="5" fill="#C6F8BD">
/svg>

CSS анімація (працює при наведенні):

.circle circle:hover {
  animation: scale;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes scale {
  50% {
    r: 20;
    fill: #FCFA82;
  }
}

HTML:

<svg width="300" height="300" class="square">
    <ellipse cx="150" cy="150" rx="145" ry="75" fill="#1B9688" stroke="#E44754" stroke-width="5">
/svg>

CSS анімація (працює при наведенні):

.oval ellipse:hover {
  animation: coning;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes coning {
  50% {
    rx: 75;
    ry: 145;
    fill: #292C42;
  }
}