html {
	margin: 0;
	padding: 0;
	width: 1000px;
	height: 1080px;
	background-color: yellow;
}
svg {
	width: 100vw;
	height: 100vh;
	float: left;
	margin-left: -5vw;
}

   .circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
    }

#circle1 {
      animation: moveRight 2s linear infinite;
      top: 20px; /* Starting position */
      left: 20px; /* Starting position */
    }

    #circle2 {
      animation: moveLeft 2s linear infinite;
      top: 200px; /* Starting position */
      left: 500px; /* Starting position */
    }

    #circle3 {
      animation: moveDown 2s linear infinite;
      top: 200px; /* Starting position */
      left: 100px; /* Starting position */
    }

     #circle4 {
      animation: moveLeft 2s linear infinite;
      top: 700px; /* Starting position */
      left: 900px; /* Starting position */
    }