<p>Pure CSS background pattern. Can you figure out how it was made before checking the code? Can you reduce the number of gradients? Let me know! You can also check out my <a href='https://codepen.io/thebabydino/pen/JjmXroB' target='_blank'>other connectors pattern</a>.</p>
@use 'sass:math';

$d: 6em;
$r: .5*$d;
$g: $d*(math.sqrt(2) - 1);
$s: $d + $g;
$p: $r/3;
$q: 2*$p;

html {
	--sl: calc(#{$q} + 1px) calc(#{$r} + -.5px), 
				transparent calc(#{$r} + .5px);
		radial-gradient(#fff $p, 
				#000 calc(#{$p} + 1px) $q, 
				#fff var(--sl)) .5*$s .5*$s, 
		repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 
			.25*$s .25*$s, 
		radial-gradient(#000 $p, 
				#fff calc(#{$p} + 1px) $q, 
				#000 var(--sl));
	background-size: $s $s, 2*$s 2*$s;
	background-blend-mode: lighten
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.