Best way to make a dot grid for a website

I want overlay an responsive image with a black grid with holes (dots) making the image visible trough them. The holes need to be about 5px of width. Like this but the bigger holes need to be from outside (wide) to inside (small).

It could be in CSS, SVG.

It could be in CSS, SVG. I have found this code (https://codepen.io/edmundojr/pen/xOYJGw) but I cant figure out how to make it like i want it to:

    // Colors
$bg-color: hsl(256,33,10);
$dot-color: hsl(256,33,70);

// Dimensions
$dot-size: 1px;
$dot-space: 22px;

body {
    background:
        linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
        linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
        $dot-color;
    background-size: $dot-space $dot-space;
}