Случайные круги - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<h1>Langstrasse</h1>

<div class="w">

</div>

@import url("https://rsms.me/inter/inter.css");

:root {

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  --font: "Inter", sans-serif;

  font-family: var(--font);

  font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum", "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";

  --c1: red;

  --c2: white;

  --c3: #202123;

  background: var(--c2);

  color: var(--c3);

  --s: 80vmin;

}



h1 {

  font-size: calc(var(--s) * .12);

  margin: 1.4rem 0 -0.5rem 2rem;

  font-weight: 900;

}



.w {

  display: flex;

  flex-wrap: wrap;

  margin: 2rem;

  width: var(--s);

}



.c {

  display: flex;

  flex-wrap: wrap;

  box-shadow: inset 0 0 0 1px var(--c2);

  width: 50%;

  height: calc(var(--s) * .5);

  background: radial-gradient(var(--c1), var(--c1) 23.6%, var(--c2) 23.6%, var(--c2) 47%, var(--c3) 47%, var(--c3) calc(70.9% - 2px), var(--c2) calc(70.9% - 2px));

  background-size: 200% 200%;

  background-position: calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%);

  background-repeat: no-repeat;

  transition: 2222ms background-position cubic-bezier(0.3, 0.7, 0, 1);

}

.c .c {

  height: calc(var(--s) * .25);

}

.c .c .c {

  height: calc(var(--s) * 0.125);

}

const $w = document.querySelector('.w');

const $h1 = document.querySelector('h1');



const l = ['Langstrasse', 'Waid', 'Niederdorf', 'Bellevue', 'Werdinsel', 'Wipkingen', 'Zentralstrasse', 'Lochergut', 'Höngg', 'Triemli', 'Affoltern', 'Wollishofen', 'Stauffacher', 'Zwinglihaus', 'Schiffbau'];



const c = [

['red', 'white', '#202123'],

['#eac328', '#CE6D54', '#354046'],

['#b03b5f', '#e1e6eb', '#07080b'],

['#E39E84', '#73BEDE', '#FDF8E7'],

['#fff', '#E17887', '#90C6E6'],

['#DF3F1F', '#fff', '#A61C54'],

['turquoise', 'hotpink', '#212121'],

['gold', 'darkgray', 'purple'],

['#2487c6', '#f7f7f7', '#202124']];





const rn = () => Math.round(Math.random());



const setRDC = () => {

  const cl = c[Math.floor(Math.random() * c.length)];

  cl.forEach((cc, i) => {

    document.documentElement.style.setProperty(`--c${i + 1}`, cc);

  });

};



let $es;



const da = () => {

  $es = [];

  $w.innerHTML = '';

  $h1.innerHTML = l[Math.floor(Math.random() * l.length)];

  setRDC();



  function ce($p, x, y) {

    $d = document.createElement('div');

    $d.classList.add('c');

    $d.style.setProperty('--x', x);

    $d.style.setProperty('--y', y);

    $p.appendChild($d);

    return $d;

  }



  for (let i = 0; i < 4; i++) {

    let $p = ce($w, rn(), rn());

    if (rn()) {

      for (let j = 0; j < 4; j++) {

        let $p2 = ce($p, rn(), rn());

        if (rn()) {

          for (let l = 0; l < 4; l++) {

            $es.push(ce($p2, rn(), rn()));

          }

        } else {

          $es.push($p2);

        }

      }

    } else {

      $es.push($p);

    }

  };

};



da();





document.documentElement.addEventListener('pointerdown', e => {

  const $t = e.target;



  /*if( $t.classList.contains('c') ) {

    $t.style.setProperty('--x', rn());

    $t.style.setProperty('--y', rn());

    e.stopPropagation();

  } else {*/

  da();

  /*}*/

});



let i = 0;

setInterval(() => {

  const l = $es.length;

  let $e = $es[i++ % l];

  $e.style.setProperty('--x', rn());

  $e.style.setProperty('--y', rn());



  if (l > 4) {

    let $e2 = $es[(i + Math.floor(l * .5)) % l];

    $e2.style.setProperty('--x', rn());

    $e2.style.setProperty('--y', rn());

  }

}, 500);

//# sourceURL=pen.js