JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

SCSS

body {
    width: 100px;
    height: 100px;
    outline: 1px solid red;
    margin: 0;
}

$bg-size: 100px;
$item-size: $bg-size / 10;
$item-size-half: $item-size / 2;

@function pos($x, $y) {
    @if ($x = 1) { $x: -50};
    @if ($x = 2) { $x: -40};
}
    @return #{$x}px #{$y}px;
}

html {
    background-color: white;
    // background-repeat: no-repeat;
    background-size: $bg-size $bg-size;
    
    background-image: 
        radial-gradient(black $item-size-half, transparent $item-size-half),
        radial-gradient(black $item-size-half, transparent $item-size-half);
    background-position:
        pos(1, 1),
        pos(2, 2);
}