如何在html中创建动态形状？

<div id="circle"></div>

#circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  transition: width 1s, height 1s, background-color 1s;
}

#circle:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

var circle = document.getElementById("circle");

circle.addEventListener("mouseover", function() {
  circle.style.width = "200px";
  circle.style.height = "200px";
  circle.style.backgroundColor = "blue";
});

circle.addEventListener("mouseout", function() {
  circle.style.width = "100px";
  circle.style.height = "100px";
  circle.style.backgroundColor = "red";
});