Анимация фигуры на CSS/JS

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox=" -20 -20 600 600"> 
  <g> 
    <circle cx="150" cy="150" r="50" fill="black"/> 
    <circle cx="250" cy="100" r="25" fill="brown"/> 
    <circle cx="72" cy="253" r="30" fill="brown"/> 
    <circle cx="55" cy="71" r="35" fill="brown"/> 
    <line x1="80" y1="95" x2="111" y2="120" stroke-width="10" stroke="gray"/>  
    <line x1="228" y1="111" x2="195" y2="128" stroke-width="10" stroke="gray"/>  
    <line x1="120" y1="190" x2="90" y2="230" stroke-width="10" stroke="gray"/>  
    <animateTransform attributeName="transform" type="rotate" values="0 150 150;360 150 150" dur="5s" repeatCount="indefinite"/> 
  </g> 
</svg>

.items { 
  width: 50px; 
  height: 50px; 
  background: red; 
  margin: 100px auto; 
  border-radius: 50%; 
  position: relative; 
  animation: scale 5s linear infinite; 
  z-index: 100; 
} 
 
@keyframes scale { 
  0% { 
    transform: scale(1.1); 
  } 
  20% { 
    transform: rotate(10deg); 
  } 
  30% { 
    transform: scale(.9)rotate(-10deg); 
  } 
} 
 
.item1, 
.item2, 
.item3 { 
  position: absolute; 
} 
 
.item1 { 
  width: 15px; 
  height: 15px; 
  background: blue; 
  border-radius: 50%; 
  top: -20px; 
  animation: color 4s linear infinite; 
} 
 
@keyframes color { 
  10% { 
    background: darkblue; 
  } 
  50% { 
    background: blue; 
  } 
  80% { 
    transform: scale(1.1) 
  } 
} 
 
.item1:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 4px; 
  background: blue; 
  position: absolute; 
  top: 70%; 
  left: %; 
  z-index: -3; 
  transform: rotate(55deg); 
} 
 
.item2 { 
  width: 25px; 
  height: 25px; 
  background: black; 
  border-radius: 50%; 
  left: -35px; 
  animation: key 6s linear; 
} 
 
@keyframes key { 
  10% { 
    transform: translate(-40px, 0); 
  } 
  30% { 
    background: #444; 
  } 
} 
 
.item2:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 4px; 
  background: black; 
  position: absolute; 
  top: 60%; 
  left: 90%; 
  z-index: -2; 
  transform: rotate(15deg); 
} 
 
.item3 { 
  width: 35px; 
  height: 35px; 
  background: pink; 
  border-radius: 50%; 
  right: -50px; 
  animation: drive 2s linear infinite; 
} 
 
.item3:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 4px; 
  background: pink; 
  position: absolute; 
  top: 60%; 
  left: -50%; 
  z-index: -10; 
  transform: rotate(-9deg); 
} 
 
@keyframes drive { 
  0% { 
    transform: scale(1.1); 
  } 
  20% { 
    transform: translate(-10px, 0); 
  } 
  30% {} 
}

<div class="items"> 
  <div class="item1"></div> 
  <div class="item2"></div> 
  <div class="item3"></div> 
</div>