<ul data-col1="1" data-col2="3" data-col3="5">
  <li>Creating</li>
  <li>WordPress</li>
  <li>Websites</li>
  <li>Developing</li>
  <li>HubSpot</li>
  <li>Pages</li>
  <li>Updating</li>
  <li>Shopify</li>
  <li>Layouts</li>
  <li>Implementing</li>
  <li>Jekyll</li>
  <li>Templates</li>
  <li>Optimizing</li>
  <li>Hugo</li>
  <li>Components</li>
</ul>
<div class="link link--alpha"></div>
<div class="link link--beta"></div>

:root {
  --font-size: clamp(0.8rem, 0.229rem + 1.524vw, 1.6rem);
  --space-alpha: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  --color-alpha: lightcyan;
  --color-beta: cyan;
  --color-gamma: indigo;
  --trd-alpha: 110ms;
  --trd-beta: 330ms;
  --line-width: clamp(0.125rem, 0.036rem + 0.238vw, 0.25rem);
  --wrapper: clamp(60rem, 38.571rem + 57.143vw, 90rem);
}

* {
  box-sizing: border-box;
  margin: 0;
}

ul {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-alpha);
  max-inline-size: var(--wrapper);
  margin: var(--space-alpha) auto;
  padding: var(--space-alpha);
  cursor: pointer;
}

li {
  color: var(--color-gamma);
  font-size: var(--font-size);
  background-color: var(--color-alpha);
  border-radius: var(--space-alpha);
  position: relative;
  padding: var(--space-alpha);
  transition: background-color var(--trd-alpha), color var(--trd-alpha);
}

[data-col1="1"] li:nth-child(1),
[data-col1="2"] li:nth-child(4),
[data-col1="3"] li:nth-child(7),
[data-col1="4"] li:nth-child(10),
[data-col1="5"] li:nth-child(13),
[data-col2="1"] li:nth-child(2),
[data-col2="2"] li:nth-child(5),
[data-col2="3"] li:nth-child(8),
[data-col2="4"] li:nth-child(11),
[data-col2="5"] li:nth-child(14),
[data-col3="1"] li:nth-child(3),
[data-col3="2"] li:nth-child(6),
[data-col3="3"] li:nth-child(9),
[data-col3="4"] li:nth-child(12),
[data-col3="5"] li:nth-child(15) {
  background-color: var(--color-beta);
  transition: background-color var(--trd-beta), color var(--trd-beta);
}

.link {
  position: absolute;
  min-block-size: var(--line-width);
  background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, black, black), linear-gradient(to bottom, black, black);
  background-size: var(--line-width), 50% var(--line-width), 50% var(--line-width);
  background-position: center, top left, bottom right;
  background-repeat: no-repeat;
}

.link--alpha {
  position-fallback: --link-calc1;
}

.link--beta {
  position-fallback: --link-calc2;
}

[data-col1="1"] li:nth-child(1),
[data-col1="2"] li:nth-child(4),
[data-col1="3"] li:nth-child(7),
[data-col1="4"] li:nth-child(10),
[data-col1="5"] li:nth-child(13) {
  anchor-name: --link-col1;
}

[data-col2="1"] li:nth-child(2),
[data-col2="2"] li:nth-child(5),
[data-col2="3"] li:nth-child(8),
[data-col2="4"] li:nth-child(11),
[data-col2="5"] li:nth-child(14) {
  anchor-name: --link-col2;
}

[data-col3="1"] li:nth-child(3),
[data-col3="2"] li:nth-child(6),
[data-col3="3"] li:nth-child(9),
[data-col3="4"] li:nth-child(12),
[data-col3="5"] li:nth-child(15) {
  anchor-name: --link-col3;
}

[data-col1="2"][data-col2="1"] ~ .link--alpha,
[data-col1="3"][data-col2="1"] ~ .link--alpha,
[data-col1="3"][data-col2="2"] ~ .link--alpha,
[data-col1="4"][data-col2="1"] ~ .link--alpha,
[data-col1="4"][data-col2="2"] ~ .link--alpha,
[data-col1="4"][data-col2="3"] ~ .link--alpha,
[data-col1="5"][data-col2="1"] ~ .link--alpha,
[data-col1="5"][data-col2="2"] ~ .link--alpha,
[data-col1="5"][data-col2="3"] ~ .link--alpha,
[data-col1="5"][data-col2="4"] ~ .link--alpha,
[data-col2="2"][data-col3="1"] ~ .link--beta,
[data-col2="3"][data-col3="1"] ~ .link--beta,
[data-col2="3"][data-col3="2"] ~ .link--beta,
[data-col2="4"][data-col3="1"] ~ .link--beta,
[data-col2="4"][data-col3="2"] ~ .link--beta,
[data-col2="4"][data-col3="3"] ~ .link--beta,
[data-col2="5"][data-col3="1"] ~ .link--beta,
[data-col2="5"][data-col3="2"] ~ .link--beta,
[data-col2="5"][data-col3="3"] ~ .link--beta,
[data-col2="5"][data-col3="4"] ~ .link--beta {
  background-position: center, bottom left, top right;
}

@position-fallback --link-calc1 {
  @try {
    inset-block-start: anchor(--link-col2 center);
    inset-inline-end: anchor(--link-col2 left);
    inset-block-end: anchor(--link-col1 center);
    inset-inline-start: anchor(--link-col1 right);
  }
  
  @try {
    inset-block-start: anchor(--link-col1 center);
    inset-inline-end: anchor(--link-col2 left);
    inset-block-end: anchor(--link-col2 center);
    inset-inline-start: anchor(--link-col1 right);
  }
}

@position-fallback --link-calc2 {
  @try {
    inset-block-start: anchor(--link-col3 center);
    inset-inline-end: anchor(--link-col3 left);
    inset-block-end: anchor(--link-col2 center);
    inset-inline-start: anchor(--link-col2 right);
  }
  
  @try {
    inset-block-start: anchor(--link-col2 center);
    inset-inline-end: anchor(--link-col3 left);
    inset-block-end: anchor(--link-col3 center);
    inset-inline-start: anchor(--link-col2 right);
  }
}


  

const highlighter = (timeout = 4000) => {
  const $ul = document.querySelector('ul')
   
  const getRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  const randomHighlighter = ($s, c) => {
    const nth1 = [1, 4, 7, 10, 13]
    const nth2 = [2, 5, 8, 11, 14]
    const nth3 = [3, 6, 9, 12, 15]
    
    let c1 = getRandomNumber(1, 5)
    let c2 = getRandomNumber(1, 5)
    let c3 = getRandomNumber(1, 5)

    if(c && nth1.indexOf(c) !== -1) {
      c1 = nth1.indexOf(c) + 1
    }

    if(c && nth2.indexOf(c) !== -1) {
      c2 = nth2.indexOf(c) + 1
    }

    if(c && nth3.indexOf(c) !== -1) {
      c3 = nth3.indexOf(c) + 1
    }

    $s.setAttribute('data-col1', c1)
    $s.setAttribute('data-col2', c2)
    $s.setAttribute('data-col3', c3)
  }

  if($ul) {
    const $lis = $ul.querySelectorAll('li')

    let hover = false;

    randomHighlighter($ul)

    const si = setInterval(() => {
      if(!hover) {
        randomHighlighter($ul)
      }
    }, timeout)

    $lis.forEach(($li, i) => {
      $li.addEventListener('mouseenter', () => {
        randomHighlighter($ul, i + 1)

        hover = true
      })
      
      $li.addEventListener('click', () => {
        randomHighlighter($ul, i + 1)

        hover = true
      })
    })

    $ul.addEventListener('mouseleave', () => {
      hover = false
    })
  }
}

highlighter()