Search notes:
CSS: Draw a circle
Note the transform property.
<!doctype html>
<style>
body {
margin: 0;
background: linear-gradient(10deg, AliceBlue, DeepSkyBlue);
height: 100vh;
}
.circle {
position: absolute;
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
transform: translate(-25px, -25px);
}
</style>
<div class='circle' style='left: 0px; top: 0px'></div>
<div class='circle' style='left: 500px; top: 200px'></div>
<div class='circle' style='left: 140px; top: 240px'></div>
<div class='circle' style='left: 240px; top: 360px'></div>
<div class='circle' style='left: 300px; top: 60px'></div>
<div class='circle' style='left: 200px; top: 200px'></div>
<div class='circle' style='left: 300px; top: 300px'></div>
<div style='position: absolute; border: 1px solid navy; left: 200px; top: 200px; width: 100px; height: 100px;background-color: rgba(250, 250, 250, 0.3);'></div>