svg figurs

by Denis Tverdokhlebov

HTML

<section>
  <div class="label">CSS Conversion of artwork by <a href="https://dribbble.com/shots/3092290-Animated-Pattern">Burnt Toast Creative</a></div>
  <div class="art">
    <!-- Top left angle -->
    <div class="angle-topleft"></div>
    <!-- Bottom left angle -->
    <div class="angle-bottomleft"></div>
    <!-- Ball Bounce -->
    <div class="ball"></div>
    <!-- Left Squiggle -->
    <div class="squiggle squiggle-left">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
        <path d="M6.4,206.4c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6
          c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27l0,0c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27
          c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6"/>
        </svg>
    </div>
    <!-- Right Squiggle -->
    <div class="squiggle squiggle-right">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
        <path d="M6.4,206.4c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6
          c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27l0,0c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27
          c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6"/>
        </svg>
    </div>
    <!-- Cross Left -->
    <div class="cross cross-left"></div>
    <!-- Cross Right -->
    <div class="cross cross-right"></div>
    <!-- Triangle Bottom Left -->
    <div class="triangle triangle-bottom-left">
      <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="75.8 -672.6 110 60" style="enable-background:new 75.8 -672.6 110 60;"...

CSS

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

.art {
  width: 475px;
  height: 325px;
  position: relative;
}

/* Angle Top Left */
.angle-topleft {
  top: 0;
  left: 0;
  width: 50px;
  height: 4px;
  border-radius: 2px 2px 2px 0;
  background-color: #520000;
  position: absolute;
}
.angle-topleft:after {
  content: '';
  width: 4px;
  height: 50px;
  border-radius: 2px 0 2px 2px;
  background-color: #520000;
  position: absolute;
  top: 0;
  left: 0;
}

/* Angle Bottom Left */
.angle-bottomleft {
  top: 100px;
  left: 0;
  width: 4px;
  height: 50px;
  border-radius: 2px 2px 0 2px;
  background-color: #520000;
  position: absolute;
}
.angle-bottomleft:after {
  content: '';
  width: 50px;
  height: 4px;
  border-radius: 0 2px 2px 2px;
  background-color: #520000;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Ball Bounce */
.ball {
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  border: 4px solid #520000;
  border-radius: 50%;
  background-color: #fc8899;
  position: absolute;
  transform: skewX(-10px);
  transform-origin: 50% 100%;
  animation-duration: 1.5s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-direction: linear;
  animation-timing-function: linear;
}
.ball:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff9cad;
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translate(0, 0);
    /*     animation-timing-function: ease-in; */
  }
  10% {
    transform: scale(1.1, 0.9) translate(0, 0);
    /*     animation-timing-function: ease-out; */
  }
  20% {
    transform: scale(1, 1) translate(0, 0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: scale(0.9, 1.1) translate(0, -25px);
    animation-timing-function: ease-in;
  }
  60%...