D3 Examples - creeps

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  <style>
    
    :root {
        --main-bg-color: rgb(183, 221, 223);;
        }
    
    body { 
      font-family: "Helvetica Neue";
      color: #61e4b4;
      margin:0;
      top:0;
      right:0;
      bottom:0;
      left:0; }
    
    .HUD {
      display: flex;
      flex-direction: row;
      position: absolute;
      bottom: 0;
      z-index: 2;
      padding: 10px;
    }
    
    .Time {
      font-size: 16px;
      color: var(--main-bg-color);
      margin-top: 3px;
    }
    
    .Loading {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    
    .Loading > .Loading__Text {
      margin: 20px;
      color: var(--main-bg-color);
      font-size: 24px;
    }
    
    button {
        font-size: 14px;
        background: white;
        color: var(--main-bg-color);
        border: none;
        outline:none;
        padding: 4px 8px;
        letter-spacing: 1px;
      }
    
    button:hover {
      background: white;
      color: var(--main-bg-color);
    }
    
  </style>
  
</head>
​
<body> 
​
  <div class="Loading"><p class="Loading__Text">Loading...</p></div>
  <div id="svg"></div>
  
  <div class="HUD">
    <div id="time" class="Time"></div>
     <audio id="audioElement" src="https://iondrimbafilho.me/autotron.mp3" crossorigin="anonymous"></audio>
        <div><button onclick="handleAudioPlay()">&#9658;</button></div>
        <div><button onclick="handleAudioPause()"> ||</button></div>
        <div><button onclick="document.getElementById('audioElement').volume+=0.1"> +</button></div>
        <div><button onclick="document.getElementById('audioElement').volume-=0.1"> -</button></div>
    </div>
  <script src="setup.js"></script>
  <script src="step.js"></script>
  <script src="homes.js"></script>
  <script src="lanes.js"></script>
  <script src="audio.js"></script>
</body>
​
    
creeps

Creeps

Credit

Audio

Blockbuilder
