<div class="wrapper">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

@use "sass:math";

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    position: absolute;
    width: 0;
    height: 0;
}

.dot {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: royalblue;
}

$count: 12;
$radius: 10vmax;
@for $index from 1 through $count {
    $angle: 360deg / $count * $index;
    .dot:nth-child(#{$index}) {
        top: math.sin($angle) * $radius;
        left: math.cos($angle) * $radius;
    }
}