Old school D3 from simpler times

All examples By author By category About

jonsadka

Full window Github gist

Animated Hexagram (No Inner Lines)

Built with blockbuilder.org

forked from jonsadka's block: Hexagram (Inner Lines)

forked from jonsadka's block: Hexagram (No Inner Lines)

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      background-color: #164677;
      margin:0; position:fixed; top:0; right:0; bottom:0; left:0;
    }

.parent-container {
      position: relative;
    }
    
    .pattern-container {
      position: absolute;
      width: 100%;
      height: 500px;      
    }

/* Perimeted of one star is 129 */
    /* length of the space is 5 */
    .pattern {
      fill: none;
      stroke: #2067AC;   
      stroke-dasharray: 129, 129;
      stroke-dashoffset: 0;
    }   
  </style>
</head>

<body>
  <div class="parent-container">
    <div class="pattern-container">
      <svg width="100%" height="100%">
        <defs>
          <pattern id="Pattern" x="0" y="0" width="30" height="40" patternUnits="userSpaceOnUse">
            <path class="pattern" d="M0 10,
                                      10 10,
                                      15 0,
                                      20 10,
                                      30 10,
                                      25 20,
                                      30 30,
                                      20 30,
                                      15 40,
                                      10 30,
                                      0 30,
                                      5 20Z" />
          </pattern>
        </defs>

<rect fill="url(#Pattern)" width="100%" height="100%"/>
      </svg>
    </div>
  </div>
</body>

<script>
  let upperThreshold = 129 + 129;
  const lowerThreshold = 0;  
  const increment = 5;
  let reset = false;
  setInterval(() => {
    const pattern = document.getElementsByClassName('pattern')[0];
    var previousStrokeDashOffset = +pattern.style['stroke-dashoffset'];
    if (previousStrokeDashOffset > upperThreshold) {
      reset = true;
    } else {
      reset = false
    }
    reset ?
      pattern.style['stroke-dashoffset'] = lowerThreshold:
      pattern.style['stroke-dashoffset'] = previousStrokeDashOffset += increment;
  }, 40)
</script>

https://d3js.org/d3.v4.min.js