CodePen

codepen.css

/* @import url("reset.css"); */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { height: -webkit-fill-available }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100dvh;
  min-height: -webkit-fill-available
}

@media (prefers-color-scheme: dark)  { html { color-scheme: dark }}
@media (prefers-color-scheme: light) { html { color-scheme: light }}

/* @import url("svg.css"); */
svg { overflow: visible !important }
svg * { fill: currentColor }

svg line,
svg polyline,
svg path:not([d$="z" i]) {
  fill: none;
  stroke: currentColor;
}

svg *:not(path),
svg path[d$="z" i] {
  transform-origin: center;
  transform-box: fill-box;
}

/* @import url("default.css"); */
body {
  gap: 1rem;

  font-size:   1rem;
  line-height: 1.25;
}

:root {
  --size: 10rem;
}

a {
  text-decoration: inherit;
  color: inherit;
}

div {
  width:  var(--size);
  height: var(--size);
  background-color: currentColor;
}

svg {
  width:  var(--size);
  height: var(--size);
  
  --stroke-width: 0.5rem;
}

svg * {
  stroke-width: var(--stroke-width, 1);
  stroke-linejoin: round
}

svg rect:not([width])  { width:  100% }
svg rect:not([height]) { height: 100% }

svg circle:not([r]) { r: 50% }

svg  circle:not([cx]),
svg ellipse:not([cx]) { cx: 50% }

svg  circle:not([cy]),
svg ellipse:not([cy]) { cy: 50% }

svg ellipse:not([rx]) { rx: 50% }
svg ellipse:not([ry]) { ry: 50% }

svg path:not([d]) { d: path("M0 80 160 80") }

svg [pathLength] {
  --path-length: 100;
  stroke-dasharray: var(--path-length);
}

svg  circle[pathLength="360"],
svg ellipse[pathLength="360"] { --path-length: 360 }

default.styl

body
  gap: 1rem

  font-size:   1rem
  line-height: 1.25

size = 10rem
:root
  --size: size

a
  text-decoration: inherit
  color: inherit

div
  width:  var(--size)
  height: var(--size)
  background-color: currentColor

svg
  width:  var(--size)
  height: var(--size)
  
  --stroke-width: 0.5rem
  *
    stroke-width: var(--stroke-width, 1)
    stroke-linejoin: round

  rect
    &:not([width])
      width: 100%
    &:not([height])
      height: 100%

  circle, ellipse
    &:not([cx])
      cx: 50%
    &:not([cy])
      cy: 50%

  circle
    &:not([r])
      r: 50%

  ellipse
    &:not([rx])
      rx: 50%
    &:not([ry])
      ry: 50%

  path:not([d])
    y = unit(size * 8, "")
    w = unit(size * 16, "")
    d: path(join(" ", "M0", y, w, y))

  [pathLength]
    --path-length: 100
    stroke-dasharray: var(--path-length)

  circle, ellipse
    &[pathLength="360"]
      --path-length: 360

reset.styl

*
  margin:  0
  padding: 0
  box-sizing: border-box

html
  height: -webkit-fill-available

body
  min-height: 100dvh
  min-height: -webkit-fill-available

svg.styl

svg
  overflow: visible !important
  *
    fill: currentColor

  polyline, line
  path:not([d$="z" i])
    fill: none
    stroke: currentColor

  *:not(path)
  path[d$="z" i]
    transform-origin: center
    transform-box: fill-box