simple SVG shapes [animated]

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="158" viewBox="0 0 384 158" fill="none">
  <g id="squares">
    <rect x="36" y="13" width="100" height="100" fill="#FF5555" />
    <rect x="10" y="46" width="100" height="100" fill="#DD3030" />
  </g>
  <circle id="circle" cx="209" cy="79" r="50" fill="#F29F21" />
  <path id="triangle" d="M319 36L370.962 126H267.038L319 36Z" fill="#1DCF8F"/>
</svg>

simple-svg-shapes-animated.markdown

simple SVG shapes [animated]

A Pen by IpsumLorem16 on CodePen.

License.

style.css

html, body {
  margin:0;
  height:100%;
}
svg {
  max-width:100%;
  max-height:100%;
}
#squares:hover {
  opacity:0.4;
}
#circle {
  transition: all 500ms;
  cursor:pointer;
}
#circle:active {
  transition: all 200ms;
  fill: #f14e4e;
}
#triangle {
  animation: moveUp 1s infinite alternate;
}
@keyframes moveUp {
  to {
    transform: translateY(-10px);
  }
}