ZoomyTech Circuits Logo Demo

index.html

<svg id="demo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <title>circuitMaster</title>
  <rect width="1000" height="1000" fill="#29abe2"/>

  <g id="blackCircuits">
    <path class="blackOutlineInside master" d="M644.37,336.29,410.7,570h242L765.37,457.28a64.37,64.37,0,1,1,61.08,44h0A64.36,64.36,0,0,1,806.12,498L685,619.15a29.12,29.12,0,0,1-20.41,8.46H341.12a28.82,28.82,0,0,1-20.38-49.21L603.59,295.54a64.29,64.29,0,1,1,40.78,40.75Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="2"/>
    <path class="blackOutlineOutside master" d="M646.07,343.08,425.18,564h225L758.58,455.58a70.37,70.37,0,1,1,67.86,51.73h0a70.47,70.47,0,0,1-18.62-2.49L689.29,623.39a35.17,35.17,0,0,1-24.65,10.22H341.12a34.82,34.82,0,0,1-24.6-59.47l280.3-280.3a70.28,70.28,0,1,1,49.26,49.24Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="2"/>
    <path id="blackCircuit" d="M785.15,395.78a58.37,58.37,0,0,0-12.84,63L655.19,576h-259L642.84,329.34a58.3,58.3,0,1,0-32.29-32.27L325,582.66a22.82,22.82,0,0,0,16.16,38.95H664.64a22.94,22.94,0,0,0,16.16-6.7L804.59,491.09a58.32,58.32,0,1,0-19.43-95.31ZM632.64,244.13l.45-.45.18-.18a44.46,44.46,0,1,1-.63.63ZM858,405.43a44.64,44.64,0,1,1-63.13,0A44.67,44.67,0,0,1,858,405.43Z" fill="#000014"/>
  </g>
  <!--g id="blackCircuitsHelpers">
    <path class="blackOutlineInside helper" d="M644.37,336.29,410.7,570h242L765.37,457.28a64.37,64.37,0,1,1,61.08,44h0A64.36,64.36,0,0,1,806.12,498L685,619.15a29.12,29.12,0,0,1-20.41,8.46H341.12a28.82,28.82,0,0,1-20.38-49.21L603.59,295.54a64.29,64.29,0,1,1,40.78,40.75Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="2"/>
    <path class="blackOutlineOutside helper" d="M646.07,343.08,425.18,564h225L758.58,455.58a70.37,70.37,0,1,1,67.86,51.73h0a70.47,70.47,0,0,1-18.62-2.49L689.29,623.39a35.17,35.17,0,0,1-24.65,10.22H341.12a34.82,34.82,0,0,1-24.6-59.47l280.3-280.3a70.28,70.28,0,1,1,49.26,49.24Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="3"/>
  </g-->
  <g id="whiteCircuits">
    <path class="whiteOutlineInside master" d="M193.88,199.5,315,78.39a29.12,29.12,0,0,1,20.41-8.46H658.88a28.82,28.82,0,0,1,20.38,49.21L396.41,402a64.29,64.29,0,1,1-40.78-40.75L589.3,127.58h-242L234.63,240.26a64.37,64.37,0,1,1-61.08-44h0A64.36,64.36,0,0,1,193.88,199.5Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
    <path class="whiteOutlineOutside master" d="M192.17,192.72a70.47,70.47,0,0,0-18.62-2.49h0A70.31,70.31,0,1,0,241.42,242L349.78,133.58h225L353.93,354.47a70.31,70.31,0,1,0,49.26,49.24l280.3-280.3a34.82,34.82,0,0,0-24.6-59.47H335.36a35.17,35.17,0,0,0-24.65,10.22Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
    <path id="whiteCircuit" d="M214.85,301.76a58.37,58.37,0,0,0,12.84-63L344.81,121.58h259L357.16,368.2a58.3,58.3,0,1,0,32.29,32.27L675,114.88a22.82,22.82,0,0,0-16.16-38.95H335.36a22.94,22.94,0,0,0-16.16,6.7L195.41,206.45a58.32,58.32,0,1,0,19.43,95.31ZM367.36,453.41l-.45.45-.18.18a44.46,44.46,0,1,1,.63-.63ZM142,292.11a44.64,44.64,0,1,1,63.13,0A44.67,44.67,0,0,1,142,292.11Z" fill="#fff"/>
  </g>
  <!--g id="whiteCircuitsHelpers">
    <path class="whiteOutlineInside helper" d="M193.88,199.5,315,78.39a29.12,29.12,0,0,1,20.41-8.46H658.88a28.82,28.82,0,0,1,20.38,49.21L396.41,402a64.29,64.29,0,1,1-40.78-40.75L589.3,127.58h-242L234.63,240.26a64.37,64.37,0,1,1-61.08-44h0A64.36,64.36,0,0,1,193.88,199.5Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
    <path class="whiteOutlineOutside helper" d="M192.17,192.72a70.47,70.47,0,0,0-18.62-2.49h0A70.31,70.31,0,1,0,241.42,242L349.78,133.58h225L353.93,354.47a70.31,70.31,0,1,0,49.26,49.24l280.3-280.3a34.82,34.82,0,0,0-24.6-59.47H335.36a35.17,35.17,0,0,0-24.65,10.22Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
  </g-->

  <g id="bottomCircuits">
    <path d="M830.22,871.12a9.88,9.88,0,0,0-9.59,7.5H653.81a2.38,2.38,0,0,0-2.32,1.8l-12.83,50.86H364.14l13.53-49.65a2.39,2.39,0,0,0-2.31-3H130.42a9.89,9.89,0,1,0,0,4.78H372.23L358.71,933a2.39,2.39,0,0,0,2.31,3h279.5a2.4,2.4,0,0,0,2.32-1.8l12.83-50.87h165a9.88,9.88,0,1,0,9.59-12.28Z" transform="translate(0)" fill="#fff"/>
    <path d="M870.07,691.49A15.28,15.28,0,0,0,855,704.38H784.71l8.76-32.86a2.4,2.4,0,0,0-2.31-3H718.63a2.39,2.39,0,0,0-2.31,1.78l-9.09,34.09H284.16a15.28,15.28,0,1,0,0,4.79h424.9a2.39,2.39,0,0,0,2.31-1.77l9.09-34.1h67.58l-8.76,32.86a2.39,2.39,0,0,0,2.31,3H855a15.28,15.28,0,1,0,15.08-17.67Z" transform="translate(0)" fill="#000014"/>
  </g>

  <text transform="translate(126.43 840.06)" font-size="150"><tspan fill="#fff">zoomy</tspan><tspan x="451.39" y="0">tech</tspan></text>
  <text transform="translate(400.79 919.06)" font-size="48" >CIRCUITS</text>
</svg>

script.babel

function drawSvgLoop(element, config) {

    /* utils */
    
    function getLength(el) {
        //https://gist.github.com/Sphinxxxx/37394a43f13c3d31d3be7d3e07a81119
        return getSvgTotalLength(el);
    }
    
    function animate(durationMS, callback) {
        let startTime;
        function anim(t) {
            if(!startTime) { startTime = t; }

            const progress = (t - startTime) / durationMS;
            callback(progress);

            requestAnimationFrame(anim);
        }
        requestAnimationFrame(anim);
    }
    
    /* /utils */
    
    
    config = config || {};
    const strokeShare = config.strokeShare || .25,
          strokeStart = config.strokeStart || 0,
          fadeIn = config.fadeIn,
          durationMS = config.durationMS || 3000,
          reverse = config.reverse;

    const elmLen = getLength(element),
          strokeLen = elmLen * strokeShare,
          startOffset = strokeStart * elmLen,
          style = element.style;

    style.strokeDasharray = fadeIn ? `${0} ${elmLen}`
                                   : `${strokeLen} ${elmLen - strokeLen}`;
    style.strokeDashoffset = -startOffset;

    animate(durationMS, progress => {
        const roundProgress = reverse ? 1 - (progress % 1)
                                      : progress % 1;
        let animLen = strokeLen,
            animOffset = -startOffset;
        
        if(fadeIn && (progress < strokeShare)) {
            animLen = elmLen * progress;
            if(reverse) { animOffset -= (elmLen * roundProgress); }
        }
        else {
            animOffset -= (elmLen * roundProgress);
            if(fadeIn) { animOffset += (reverse ? 0 : strokeLen); }
        }

        style.strokeDasharray = `${animLen} ${elmLen - animLen}`;
        style.strokeDashoffset = animOffset;
    });
}


const config = {
    strokeShare: .5,
    //strokeStart: .2,
    durationMS: 10000,
    fadeIn: true,
    //reverse: true,
}
drawSvgLoop(document.querySelector('.blackOutlineInside'),  config);
drawSvgLoop(document.querySelector('.blackOutlineOutside'), config);
drawSvgLoop(document.querySelector('.whiteOutlineInside'),  config);
drawSvgLoop(document.querySelector('.whiteOutlineOutside'), config);

scripts

<script src="https://cdn.rawgit.com/Sphinxxxx/37394a43f13c3d31d3be7d3e07a81119/raw/8a3fd21abeda6654e9cc51d0ffeb2f7155dcfcbe/getSvgTotalLength.js"></script>

style.css

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: white;
  overflow: hidden;
  background-color: #29abe2;
}

#demo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;#39;" rel="stylesheet" />

zoomytech-circuits-logo-demo.markdown

ZoomyTech Circuits Logo Demo

A Pen by Andreas Borgen on CodePen.

License.