.rainbow
  - let b = 0
  while b < 7
    .rainbow__band(style=`--index: ${b};`)
    -- b++

@property --hue
  initial-value 0
  inherits false
  syntax '<number>'

*
  box-sizing border-box
  
body
  min-height 100vh
  display grid
  place-items center
  background hsl(210, 80%, 90%)
  
.rainbow
  height 25vmin
  width 50vmin
  position relative
  overflow hidden
  
  &__band
    --size calc((50 - (var(--index, 0) * 4)) * 1vmin)
    height 50vmin
    width 50vmin
    border-radius 50%
    position absolute
    top 100%
    left 50%
    border-width 2vmin
    border-color 'hsl(%s, 80%, 50%)' % var(--hue)
    border-style solid
    transform translate(-50%, -50%)
    height var(--size)
    width var(--size)
    animation rainbow calc(var(--duration, 8) * 1s) calc(var(--index, 0) * -0.2s) infinite linear
    
      
@keyframes rainbow
  to
    --hue 360

import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CONFIG = {
  DURATION: 8
}

const UPDATE = () => {
  document.documentElement.style.setProperty('--duration', CONFIG.DURATION)
}

const CONTROLLER = new GUI()
CONTROLLER.add(CONFIG, 'DURATION', 1, 15, 0.1).name('Speed').onChange(UPDATE)

UPDATE()