bizpin Logo Animation

by mgoetzke

HTML

<script src="https://cdn.jsdelivr.net/walkway/0.0.7/walkway.min.js"></script>
<div>

<svg
   height="160px"
   viewBox="0 0 28 11"
   version="1.1"
   id="bizpin">
  <defs
     id="defs4490" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     showgrid="false"
    />
  <metadata
     id="metadata4493">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-17,-68)">
    <g
       id="biz">
      <path 
         d="m 17.294624,76.639877 v -7.792805 h 0.718303 v 3.136759 q 0.454752,-0.558106 1.018025,-0.831991 0.563273,-0.279052 1.235067,-0.279052 1.193726,0 2.036051,0.868164 0.847494,0.862996 0.847494,2.098063 0,1.219564 -0.852661,2.08256 -0.852661,0.862996 -2.051555,0.862996 -0.687296,0 -1.245401,-0.294555 -0.558106,-0.294556 -0.98702,-0.883667 v 1.033528 z m 2.89388,-0.552937 q 0.604615,0 1.116211,-0.294556 0.511597,-0.299723 0.81132,-0.837158 0.304891,-0.537435 0.304891,-1.136882 0,-0.599446 -0.304891,-1.142049 -0.304891,-0.542602 -0.821655,-0.842326 -0.511597,-0.304891 -1.09554,-0.304891 -0.594279,0 -1.131714,0.304891 -0.532267,0.299724 -0.821655,0.81132 -0.284221,0.511597 -0.284221,1.152385 0,0.976684 0.640788,1.632975 0.645955,0.656291 1.586466,0.656291 z"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:6.61458302px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic';letter-spacing:0px;word-spacing:0px;"
         id="bizpin--b"
         inkscape:connector-curvature="0" />
      <path
         d="m 24.186193,68.702378 q 0.248047,0 0.423747,0.175699 0.175699,0.1757 0.175699,0.423747...

CSS

#bizpin {
  position: absolute;
  xmin-height: 200px;
}

svg path {
  stroke:#fff;stroke-width:0.2px;
  fill: white;
  fill-opacity: 0;
  transition: fill-opacity 1s ease-in;
}

body {
  background: lightblue;
}

JavaScript

// Overwriting defaults
var svg = new Walkway({
  selector: '#bizpin',
  duration: '550',
  // can pass in a function or a string like 'easeOutQuint'
  easing: function (t) {
    return t * t;
  }
});

svg.draw(() => {
	//fillLetters(['p','i2','n'])

});

fillLetters(['b','i','z'])

function fillLetters(letters) {
 for (const letterName of letters) {
 		const letter = document.getElementById('bizpin--' + letterName)
 	 	letter.style['fill-opacity'] = '1';
 }
}