@use 'sass:math';

$e: 8em; // edge length of square background box
$f: .75; // relative size [0 to 1] of star in square background box
$c0: dimgrey; // background
$c1: gold; // star

$n: 5; // number of vertices
$va: ($n - 2)*180deg/$n; // regular pentgon vertex angle
$ba: 360deg/$n; // regular pentagon base angle
$pa: 2*(90deg - $ba); // pentagram vertex angle
$r: .5*$e; // half the background-size square edge
$rb: $f*$r; // circumradius of regular pentagon/ pentagram
$ri: $rb*math.sin(.5*$pa); // inradius of small inner pentagon of pentagram
$rc: $ri/math.cos(.5*$ba);  // circumradius of small inner pentagon of pentagram
$ty: $r - $rb; // offset of top pentagram vertex from top of background box
$dy: $r - $ri; // offset of horizontal pentagram edge from top of background box
$oy: $r + $rc; // offset of bottom pentagram edge intersection from top of background box

html {
  background: 
    conic-gradient(from -.5*$va at 50% $ri + $rc, $c1 $va, transparent 0%) 0 $dy, 
    conic-gradient(from 180deg - .5*$va at 50% $oy, $c0 $va, transparent 0%), 
    conic-gradient(from 180deg - .5*$pa at 50% $ty, $c1 $pa, transparent 0%) $c0;
  background-size: $e $e
}

/*
No JS. Hand-drawn/ hand-written geometry behind the demo
https://twitter.com/anatudor/status/1593329014034292737
https://mastodon.social/@anatudor/109360816896366941

A similar pattern used as a border pattern here to frame the cat:
https://codepen.io/thebabydino/pen/JjZNXoQ
*/