Old school D3 from simpler times

All examples By author By category About

jonsadka

Full window Github gist

Uber Loading 2

Built with blockbuilder.org

forked from jonsadka's block: Uber Loading 1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .parent-container {
      position: relative;
    }
    
    .logo-container,
    .pattern-container {
      position: absolute;
      width: 100%;
      height: 500px;      
    }

.logo-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }    
    
    .letter-path {
      fill: #000203;
      animation: transitionOpacity 1.4s infinite alternate;
    }

.pattern {
      fill: none;
      stroke: #000203;      
    }
    
    @keyframes transitionOpacity {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0.8;
      }
    }  
  </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="60", height="60" patternUnits="userSpaceOnUse">
            <path class="pattern first" d="M15 40h-15M45 40h-30M45 20h-30M45 40h15M15 20h-15M45 20h15M10 0l-10 30 15 10 25 20-20-60 25 20 15 10-10 30M60 52l-10 8h-10M20 0h-10l-10 8"/>
            <path class="pattern second" d="M0 52l15-12 30-20 15-12-10-8 10 30-15 10-25 20 20-60-25 20-15 10 10 30zM0 8l15 12 30 20 15 12M10 60h10M40 0h10"/>
          </pattern>
        </defs>

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

<div class="logo-container">
      <svg width="584px" height="122px" viewBox="0 0 584 122">
        <g id="Logo" transform="scale(2)">
          <path d="M45.9,1.471 L45.9,35.053 C45.9,46.267 40.936,50.924 29.293,50.924 C17.649,50.924 12.685,46.267 12.685,35.053 L12.685,0 L1.471,0 C0.491,0 0,0.491 0,1.471 L0,35.604 C0,54.357 11.95,60.914 29.293,60.914 C46.635,60.914 58.585,54.357 58.585,35.604 L58.585,0 L47.37,0 C46.39,0 45.9,0.491 45.9,1.471" class="letter-path" id="Letter-U"></path>
          <path d="M117.196,50.251 L95.067,50.251 L95.067,39.281 C95.067,35.604 97.089,33.95 102.544,33.95 L117.196,33.95 C124.243,33.95 126.204,36.646 126.204,42.162 C126.204,47.677 124.243,50.251 117.196,50.251 Z M95.067,9.621 L114.867,9.621 C121.485,9.621 123.324,12.114 123.324,17.281 C123.324,22.449 121.485,24.942 114.867,24.942 L95.067,24.942 L95.067,9.621 Z M128.962,28.312 C133.864,25.738 135.886,20.897 135.886,15.198 C135.886,1.961 125.101,0 113.948,0 L88.455,0 C84.226,0 82.634,1.287 82.634,4.167 L82.634,56.317 C82.634,58.769 83.859,59.872 87.107,59.872 L118.483,59.872 C130.31,59.872 138.766,55.276 138.766,43.326 C138.766,36.156 135.702,30.089 128.962,28.312 L128.962,28.312 Z" class="letter-path" id="Letter-B"></path>
          <path d="M208.469,9.744 C209.388,9.744 209.817,9.438 210.123,8.763 L213.372,0.735 C213.556,0.246 213.372,0 212.881,0 L167.717,0 C163.488,0 161.896,1.287 161.896,4.167 L161.896,56.317 C161.896,58.769 163.12,59.872 166.369,59.872 L208.469,59.872 C209.388,59.872 209.817,59.565 210.123,58.892 L213.372,50.863 C213.556,50.373 213.372,50.128 212.881,50.128 L174.336,50.128 L174.336,39.526 C174.336,35.849 176.358,34.194 181.811,34.194 L198.542,34.194 C199.461,34.194 199.889,33.889 200.196,33.215 L203.322,25.493 C203.505,25.002 203.322,24.758 202.831,24.758 L174.336,24.758 L174.336,9.744 L208.469,9.744" class="letter-path" id="Letter-E"></path>        
          <path d="M268.246,27.76 L247.41,27.76 L247.41,9.622 L268.246,9.622 C276.028,9.622 277.744,12.624 277.744,18.691 C277.744,24.819 276.028,27.76 268.246,27.76 Z M291.655,58.83 L278.235,35.788 C284.914,34.073 290.307,29.661 290.307,18.446 C290.307,3.923 281.298,0 266.407,0 L240.792,0 C236.564,0 234.97,1.287 234.97,4.167 L234.97,58.401 C234.97,59.381 235.461,59.872 236.441,59.872 L247.41,59.872 L247.41,42.407 C247.41,38.73 249.432,37.075 254.887,37.075 L265.917,37.075 L278.05,58.892 C278.418,59.504 278.786,59.872 279.705,59.872 L291.104,59.872 C291.901,59.872 291.901,59.197 291.655,58.83 L291.655,58.83 Z" class="letter-path" id="Letter-R"></path>
        </g>
      </svg>    
    </div>
  </div>
</body>

<script>
	const upperThreshold = 300;
	const lowerThreshold = 120;  
  const increment = 3;
	let subtract = true;
  setInterval(() => {
	  const patterns = document.getElementsByClassName('pattern');    
    Array.prototype.slice.call(patterns).forEach((pattern, index) => {
      var previousStrokeDashArray = +pattern.style['stroke-dasharray'] || upperThreshold;
      if (previousStrokeDashArray > upperThreshold) {
        subtract = true;
      } else if (previousStrokeDashArray < lowerThreshold) {
        subtract = false;
      }
			
      subtract ? 
        pattern.style['stroke-dasharray'] = previousStrokeDashArray -= increment :
				pattern.style['stroke-dasharray'] = previousStrokeDashArray += increment;          
    })
  }, 30)
</script>

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