<svg width="647" height="588" viewBox="0 0 647 588" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="shapes">
    <path id="background" fill="#1F1F1F" d="M0 0h647v588H0z"/>
    <path id="rectangle" fill="#D55858" d="M168 152h100v87H168z"/>
    <ellipse id="circle" cx="218.5" cy="363" rx="56.5" ry="56" fill="#6F9C6E"/>
    <path id="star" d="M400.5 283l15.828 46.987h51.221l-41.438 29.039 15.828 46.987-41.439-29.039-41.439 29.039 15.828-46.987-41.438-29.039h51.221L400.5 283z" fill="#B8B444"/>
    <path id="triangle" d="M400.5 141l52.395 94.5h-104.79L400.5 141z" fill="#3C87CC"/>
  </g>
</svg>

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

gsap.to("#rectangle",{
  duration: 0.5,
  x: 210,
  y: -90,
  rotate: 90
})
gsap.to("#triangle",{
  duration: 0.6,
  x: -65,
  y: 20,
})
gsap.to("#circle",{
  duration: 0.7,
  x: 120,
  y: 70,
})
gsap.to("#star",{
  duration: 0.8,
  x: -55,
  y: -20,
  transformOrigin: "center center",
  rotate: 70
})