Logo Animation in Javascript

In this example below you will see how to do a Logo Animation in Javascript with some HTML / CSS and Javascript

My Logo animated with Javascript.

Thumbnail
This awesome code was written by m-paul, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright m-paul ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Logo Animation in Javascript</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" height="600" width="800" id="svg4667"><g
     transform="matrix(1.25,0,0,-1.25,0,600)"
     id="g4675"><g transform="matrix(2.5204961,0,0,2.5454765,-7.6641405,10.907758)"
       id="g4677"><g
           transform="translate(22.1714,87.9814)"
           id="g4685"><path
             id="path4687"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="m 0,0 c -0.405,0 -6.543,0.117 -6.6,0.107 -0.433,0.043 -0.535,0.471 -0.535,0.471 0,0 -3.026,74.807 -3.045,75.001 -0.022,0.194 0.271,0.296 0.271,0.296 0,0 6.803,0.759 6.943,0.781 0.226,0.027 0.328,-0.289 0.328,-0.289 L 16.837,17.04 37.735,79.669 c 0,0 0.15,0.226 0.459,0.201 0.311,-0.024 5.351,-0.325 5.351,-0.325 0,0 0.306,-0.087 0.326,-0.322 0.02,-0.238 4.941,-77.471 4.941,-77.471 0,0 -0.054,-0.296 -0.349,-0.335 -0.293,-0.039 -6.99,-0.626 -6.99,-0.626 0,0 -0.274,0.073 -0.278,0.219 -0.002,0.15 -3.404,55.113 -3.404,55.113 L 19.954,0.771 c 0,0 -0.145,-0.193 -0.266,-0.208 C 19.568,0.549 14.076,0.15 13.908,0.137 13.74,0.122 13.655,0.345 13.655,0.345 L -1.357,47.278 0.496,0.451 C 0.496,0.451 0.407,0 0,0" /></g><g
           transform="translate(82.2803,119.5938)"
           id="g4689"><path
             id="path4691"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="M 0,0 -2.283,41.572 35.575,43.192 38.201,4.73 0,0 Z m 42.219,50.832 c 0,0 -0.031,0.16 -0.153,0.157 -0.122,-0.007 -51.504,-2.262 -51.664,-2.275 -0.159,-0.005 -0.177,-0.167 -0.177,-0.167 l 2.643,-49.209 c 0,0 -1.855,-0.372 -2.056,-0.423 -0.202,-0.048 -0.187,-0.332 -0.187,-0.332 l 1.105,-6.746 c 0,0 0.097,-0.199 0.238,-0.19 0.143,0.005 1.096,0.049 1.096,0.049 l 1.43,-20.077 c 0,0 0.035,-0.209 0.199,-0.18 0.165,0.025 6.388,0.873 6.63,0.917 0.243,0.044 0.281,0.331 0.281,0.331 l -1.408,19.671 38.179,5.218 2.081,-23.531 c 0,0 -0.008,-0.141 0.106,-0.126 0.12,0.015 6.692,1.077 6.816,1.102 0.123,0.024 0.186,0.193 0.186,0.193 l -5.345,75.618 z" /></g><g
           transform="translate(139.5293,127.8271)"
           id="g4693"><path
             id="path4695"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="M 0,0 -0.889,36.102 34.724,36.966 38.416,7.021 0,0 Z m 41.703,44.598 c 0,0 -0.039,0.181 -0.199,0.176 -0.162,-0.004 -49.346,-1.858 -49.447,-1.843 -0.103,0.014 -0.101,-0.162 -0.101,-0.162 l 1.64,-76.04 c 0,0 0.002,-0.223 0.247,-0.223 0.242,0.005 6.708,0.63 6.87,0.63 0.162,0 0.177,0.279 0.177,0.279 l -0.509,24.463 36.977,-3.797 1.087,-19.955 c 0,0 0.044,-0.18 0.165,-0.165 0.121,0.012 6.992,0.626 7.108,0.643 0.127,0.019 0.192,0.099 0.184,0.179 -0.009,0.08 -1.637,25.547 -1.669,25.669 -0.034,0.123 -0.16,0.155 -0.16,0.155 l -21.619,2.217 c 0,0 23.555,4.139 23.713,4.188 0.157,0.043 0.165,0.232 0.165,0.232 l -4.629,43.354 z" /></g><g
           transform="translate(190.5479,95.5889)"
           id="g4697"><path
             id="path4699"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="m 0,0 c -0.007,0.216 -0.975,75.764 -0.975,75.764 0,0 -0.004,0.181 0.197,0.191 0.206,0.013 49.854,1.865 49.854,1.865 0,0 0.157,-0.033 0.182,-0.155 0.027,-0.123 0.805,-7.228 0.805,-7.228 0,0 -0.014,-0.231 -0.24,-0.234 C 49.6,70.201 6.69,68.658 6.69,68.658 L 7.603,7.81 54.372,10.825 c 0,0 0.143,-0.012 0.146,-0.194 0.004,-0.185 0.186,-7.239 0.186,-7.239 0,0 -0.021,-0.202 -0.257,-0.218 C 54.214,3.156 0.226,-0.188 0.226,-0.188 0.226,-0.188 0.008,-0.213 0,0" /></g><g
           transform="translate(195.6445,14.873)"
           id="g4701"><path
             id="path4703"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="m 0,0 c -0.005,0.116 -3.772,76.689 -3.772,76.689 0,0 -0.017,0.133 0.133,0.161 0.154,0.026 7.325,0.974 7.325,0.974 0,0 0.142,-0.005 0.147,-0.167 C 3.838,77.497 7.151,7.178 7.151,7.178 l 44.994,4.385 c 0,0 0.22,0.042 0.22,-0.121 C 52.361,11.277 52.237,4.832 52.22,4.618 52.206,4.402 51.997,4.393 51.997,4.393 c 0,0 -51.744,-4.539 -51.844,-4.539 C 0.049,-0.148 0.008,-0.112 0,0" /></g><g
           transform="translate(177.8408,92.1836)"
           id="g4705"><path
             id="path4707"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="M 0,0 C 0,0 0.005,0.16 0.18,0.128 0.35,0.1 7.71,-1.228 7.71,-1.228 c 0,0 0.162,-0.048 0.172,-0.192 0.003,-0.143 3.889,-75.717 3.901,-75.93 0.01,-0.211 -0.15,-0.248 -0.15,-0.248 l -53.184,-1.21 c 0,0 -0.165,0.027 -0.175,0.243 -0.006,0.213 -3.128,73.308 -3.133,73.463 -0.007,0.151 0.039,0.233 0.174,0.27 0.138,0.038 7.399,1.906 7.399,1.906 0,0 0.148,0.049 0.143,-0.082 -0.006,-0.136 2.882,-68.124 2.882,-68.124 L 3.326,-70.666 0,0 Z" /></g><g
           transform="translate(82.8188,35.6064)"
           id="g4709"><path
             id="path4711"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="m 0,0 -1.966,45.173 36.55,1.72 L 37.555,1.118 0,0 Z m 41.553,54.568 c -0.011,0.121 -0.192,0.136 -0.192,0.136 l -50.31,-2.532 c 0,0 -0.192,-0.059 -0.177,-0.234 0.013,-0.174 2.239,-75.054 2.239,-75.054 0,0 -0.027,-0.143 0.143,-0.182 0.167,-0.032 7.194,-0.9 7.194,-0.9 0,0 0.19,-0.017 0.2,0.179 0.009,0.197 -0.144,16.722 -0.144,16.722 l 38.073,0.49 1.209,-15.392 c 0,0 -0.017,-0.182 0.234,-0.165 0.252,0.014 6.93,0.483 7.062,0.483 0.132,0.004 0.169,0.177 0.169,0.177 0,0 -5.688,76.156 -5.7,76.272" /></g><g
           transform="translate(24.7002,35.4756)"
           id="g4713"><path
             id="path4715"
             style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.5"
             d="M 0,0 -1.649,41.93 30.215,42.941 37.334,5.829 0,0 Z m 45.902,-0.523 c 0,0 -9.938,50.441 -9.978,50.586 -0.039,0.153 -0.192,0.143 -0.192,0.143 L -9.127,49.062 c 0,0 -0.184,-0.046 -0.176,-0.166 0.005,-0.125 3.28,-76.573 3.28,-76.573 0,0 0.032,-0.131 0.172,-0.145 0.139,-0.013 7.003,-1.063 7.003,-1.063 0,0 0.208,-0.003 0.206,0.131 -0.001,0.138 -0.503,20.982 -0.503,20.982 0,0 44.689,6.918 44.889,6.974 0.2,0.056 0.158,0.275 0.158,0.275" /></g><g
           transform="translate(142.2432,160.0264)"
           id="g4717"><path
             id="path4719"
             style="fill:#e50f89;fill-opacity:0;fill-rule:nonzero;stroke:#e50f89;stroke-width:0.5"
             d="M 0,0 -0.278,-28.667 31.676,-22.601 28.27,1.334 0,0 Z" /></g><g
           transform="translate(143.8984,114.2012)"
           id="g4721"><path
             id="path4723"
             style="fill:#00aaec;fill-opacity:0;fill-rule:nonzero;stroke:#00aaec;stroke-width:0.5"
             d="M 0,0 28.424,-5.5 32.79,-87.837 2.578,-89.261 0,0 Z" /></g></g></g></g></svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/m-paul/logo-animation-in-javascript-aBBmqW */
body {
  background: #ffffff;
  color: #444444;
}

svg {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 1000px;
  max-height: 100px;
}

.pointer {
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/m-paul/logo-animation-in-javascript-aBBmqW */
const drawLogo = () => {
  const paths = document.querySelectorAll('path')
  for (let i = 0; i < paths.length; i++) {
    const path = paths[i]
    const length = path.getTotalLength()

    path.style.transition = path.style.WebkitTransition = 'none'
    path.style.strokeDasharray = length + ' ' + length
    path.style.strokeDashoffset = length

    path.getBoundingClientRect()

    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s linear'
    path.style.strokeDashoffset = '0'
  }
}

drawLogo()

const whichTransitionEvent = () => {
  const el = document.createElement('fakeelement')
  const transitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
  }
  for (let t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t]
    }
  }
}


/* Listen for a transition! */
const transitionEvent = whichTransitionEvent()
let transitionDone = false
transitionEvent && document.body.addEventListener(transitionEvent, () => {
  transitionDone = true
  logoDone()
  document.body.className = 'pointer'
})

const logoDone = () => {
  if (transitionDone) {
    const paths = document.querySelectorAll('path')
    for (let i = 0; i < paths.length; i++) {
      const path = paths[i]
      path.style.fillOpacity = 1
    }
  }
}

document.body.onclick = () => {
  if (transitionDone) {
    drawLogo()
    transitionDone = false
    const paths = document.querySelectorAll('path')
    for (let i = 0; i < paths.length; i++) {
      const path = paths[i]
      path.style.fillOpacity = 0
    }
    document.body.className = ''
  }
}

Comments