Samsung loading screen animation

by Génesis García Morilla

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vivus.min.js"></script>
<svg id="samsung" height="60.113815" width="388.68164">
  <path d="M 0.58883363,38.894242 H 15.969937 C 13.05108,53.082421 27.0489,52.586597 26.896612,44.624084 26.669385,32.743346 0.95527663,33.9869 0.95527663,16.081953 0.95527663,0.15675236 17.327028,0.60011896 20.185606,0.60011896 c 2.858578,0 21.870021,-1.89725716 19.388994,18.34437604 H 25.411801 C 27.933575,7.8157711 15.730011,7.6938573 15.208497,14.337778 14.462569,23.840636 41.32781,25.247886 41.023233,42.538733 40.718657,59.829581 25.456341,59.57621 21.446202,59.57621 c -4.010139,0 -22.05029337,0.765279 -20.85736837,-20.681968 z"
  />
  <path d="m 180.50525,38.889551 h 15.3811 c -2.91886,14.188179 11.07896,13.692355 10.92667,5.729842 -0.22723,-11.880738 -25.94133,-10.637184 -25.94133,-28.542131 0,-15.92520104 16.37174,-15.48183444 19.23033,-15.48183444 2.85858,0 21.87001,-1.89725726 19.38899,18.34437644 h -14.1628 c 2.52177,-11.128724 -9.68179,-11.2506376 -10.2033,-4.606717 -0.74593,9.502857 26.11931,10.910108 25.81473,28.200954 -0.30458,17.290848 -15.56689,17.037478 -19.57703,17.037478 -4.01014,0 -22.05029,0.765279 -20.85736,-20.681968 z"
  />
  <path d="M 59.676635,2.0409067 49.777906,58.036576 H 64.777963 L 72.583219,7.7882507 79.912008,58.036576 h 14.75234 L 84.651888,2.0409067 Z" />
  <path d="m 106.94626,2.0409067 -1.2,55.9956693 h 14.13333 l 0.4,-49.1852805 9.33334,49.1852805 h 13.86666 l 9.2,-49.7186137 0.93334,49.7186137 h 14 L 165.87959,2.0409067 H 143.74626 L 136.67959,46.317963 129.61293,2.0409067 Z" />
  <path d="M 232.54626,2.0409067 V 43.517963 c 0,9.215732 7.97248,16.026186 20.53333,16.026186 12.56086,0 19.6,-6.653536 19.6,-16.026186 V 2.0409067 H 257.74626 V 43.517963 c 0,4.497912 -2.14127,6.266666 -4.8,6.266666 -2.65873,0 -5.06667,-1.674637 -5.06667,-6.266666 V 2.0409067 Z"
  />
  <path d="M 287.47959,2.0409067 V 58.036576 h 13.46667 l -0.53333,-46.118613 14.66666,46.118613 h 19.46667 V 2.0409067 H...

CSS

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

svg * {
  fill: #333;
  stroke: #333;
  stroke-width: 1;
  fill-opacity: 0;
  transition: fill-opacity ease-in-out 2s;
}

svg.finished * {
  fill-opacity: 1;
}

JavaScript

const vivus = new Vivus('samsung', {
    duration: 200
  },
  o => o.el.classList.add('finished')
)

document.body.onclick = () => {
  document.querySelector('#samsung').classList.remove('finished')
  setTimeout(() => vivus.reset().play(), 2000)
}