Котик на SVG | Записки верстальщика

Мой первый рисунок на SVG. Он конечно очень простой, но это первый рисунок который я сам нарисовал на SVG и анимировал с помощью CSS, а в дальнейшем и с помощью JS. Но анимация этого кота на JS будет в соответствующем разделе

Как то раз захотел просто научиться хоть немного рисовать на SVG и у меня получился такой котик)) Вначале он конечно был статичным, но потом моча в голову ударила и я котика немного оживил.

Вот относительно небольшой код HTML и CSS:

<div class="cat-svg-demo__parent">
  <svg viewBox="0 0 14 13">
    <path class="cat" fill="#303030" d="M12.9 6.9c0 2.5-2.6 4.7-5.7 4.7S1.4 9.4 1.4 6.9c0-1 .3-1.9 1-2.7.6-.7 1.5-1.3 2.5-1.6.7-.2 1.5-.3 2.3-.3 3.1-.1 5.7 2 5.7 4.6z" />
    <path class="ear1" fill="#303030" d="M11.6,0.8c0.4,1.1,0.3,2.3,0,3.4L9.1,2.8C10.2,1.7,11.1,0.9,11.6,0.8z" />
    <path class="ear" fill="#303030" d="M2.5,1c0.9,0.4,1.7,1.1,2.4,1.9L2.5,4.4C2,3.2,1.9,2,2.5,1L2.5,1z" />
    <ellipse class="eye" fill="#FFF" cx="9.2" cy="6.6" rx="1.1" ry=".8" />
    <ellipse class="eye" fill="#FFF" cx="4.8" cy="6.6" rx="1.1" ry=".8" />
    <ellipse class="pupils" fill="#303030" cx="4.8" cy="6.8" rx=".2" ry=".5" />
    <ellipse class="pupils" fill="#303030" cx="9.2" cy="6.8" rx=".2" ry=".5" />
    <path class="moustache" stroke="#303030" stroke-width=".25" stroke-miterlimit="10" d="M13.8 8.1l-1.1-.2m1.2 2l-1.8-.8m1.1 2.5L11 10.1M.3 8.1l1.3-.2M.1 9.8l2-.8M.9 11.5l2.3-1.4" />
  </svg>
</div>

.cat-svg-demo__parent {
  width: 260px;
  margin: 0 auto;
}

.eye {
  animation: eye 4s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes eye {
  0% {
    transform: scale(1, 1);
  }
  36% {
    transform: scale(1, 1);
  }
  38% {
    transform: scale(1, 0);
  }
  42% {
    transform: scale(1, 0);
  }
  44% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.ear {
  animation: ear 7s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

.ear1 {
  animation: ear 7s;
  animation-delay: 300ms;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes ear {
  0% {
    transform: scale(1, 1);
  }
  37% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1, 0);
  }
  43% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

Объявление

Если вы хотите обучаться вместе со мной, то приглашаю вас на индивидуальные курсы HTML Academy: «Профессиональная вёрстка сайтов» или «Адаптивная вёрстка и автоматизация».

Просто спросите у менеджера меня — наставника Зиновьева Александра. Обучение проходит в помесячном индивидуальном формате, и вы можете начать в любое удобное для вас время.

Кроме того, в HTML Academy вы получите профессию и даже сможете устроиться на работу с новой профессией.

Обнаружил ошибку в статье? Напиши на почту.

↑ Смена цвета картинки

↓ Звездное небо на canvas

Вступление