index.js

const svgs = {
  drum: '<svg id="drum" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:#f0eef3;}.cls-2,.cls-3{fill:#3c2862;}.cls-3{stroke:#3c2862;stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>drum2</title><g id="drum-body"><path class="cls-1" d="M256.63,266.38,269.34,255l-10.46-.9V242.75H241v11.17L230,255l12.7,11.4L181.33,420.43c4.82,3.83,10.48,1.9,17,1.31l45.15-118.28L241,427.26a23.79,23.79,0,0,0,17.86,0l-2.44-122.32L301,421.74c6.49.59,12.15,2.52,17-1.31Z"/><path class="cls-2" d="M258.75,268.5l12.71-11.4c2.1-1.88.27-4.91-2.12-5.12l-10.46-.9,3,3V242.75a3,3,0,0,0-3-3H241a3,3,0,0,0-3,3v11.17l3-3L230,252c-2.38.23-4.23,3.23-2.13,5.12l12.71,11.4-.77-2.92L186.1,400.41l-7.66,19.23a3,3,0,0,0,1.38,3.38c5.75,4,12,2.41,18.48,1.72a3.19,3.19,0,0,0,2.89-2.21L240.7,319l5.64-14.78-5.89-.8-2.13,108.4-.3,15.4a3.07,3.07,0,0,0,2.2,2.89,28.33,28.33,0,0,0,19.45,0,3.1,3.1,0,0,0,2.21-2.89l-2.13-107.15-.31-15.17-5.89.8,39,102.23,5.56,14.56a3.2,3.2,0,0,0,2.89,2.21c6.48.69,12.73,2.24,18.48-1.72a3,3,0,0,0,1.38-3.38l-53.7-134.83-7.66-19.23c-1.42-3.54-7.22-2-5.79,1.6L307.45,402l7.66,19.23,1.38-3.39c-4.65,3.2-10.25,1.45-15.46.9l2.9,2.2-39-102.23-5.56-14.56c-1.14-3-6-2.82-5.9.79l2.13,107.15.31,15.17,2.2-2.9a23,23,0,0,1-16.27,0l2.21,2.9,2.13-108.4.3-15.4c.07-3.58-4.75-3.8-5.89-.8l-39.51,103.5-5.64,14.78,2.89-2.2c-5.2.55-10.81,2.29-15.45-.9l1.37,3.39,53.71-134.82,7.66-19.23a2.91,2.91,0,0,0-.77-2.92l-12.7-11.4L230,258l11-1.06a3.08,3.08,0,0,0,3-3V242.75l-3,3h17.86l-3-3v11.33a3.08,3.08,0,0,0,3,3l10.46.9-2.13-5.12-12.7,11.4C251.63,266.85,255.89,271.08,258.75,268.5Z"/><path class="cls-1" d="M426,182.78H73v58.73h.43A2,2,0,0,0,73,242.6c0,9,79,16.31,176.5,16.31S426,251.61,426,242.6a2,2,0,0,0-.43-1.09H426Z"/><path class="cls-2" d="M426,179.78H87.41c-4.53,0-9.27-.4-13.78,0-.21,0-.42,0-.63,0a3,3,0,0,0-3,3v58.73a3,3,0,0,0,3,3h.43l-2.89-3.8c-4.28,10.73,25,12.94,30.15,13.67,28.08,4,56.56,5.41,84.88,6.43q57.21,2.06,114.49.42c30.21-.83,60.55-2.14,90.56-5.83,9.45-1.16,19.13-2.32,28.28-5.07,4.2-1.26,11.89-3.78,9.56-9.62l-2.89,3.8H426a3,3,0,0,0,3-3V182.78c0-3.86-6-3.87-6,0v58.73l3-3h-.43c-1.78,0-3.63,2-2.9,3.8.1.25,1.2-1,.23-.11a17.72,17.72,0,0,1-1.86,1,38,38,0,0,1-6.77,2.14,197.75,197.75,0,0,1-24.76,4.16c-27,3.25-54.22,4.58-81.37,5.46-63.27,2.06-127.37,2-190.41-4.54A270.35,270.35,0,0,1,87.49,246a52.28,52.28,0,0,1-9-2.57,23.89,23.89,0,0,1-2.4-1.27c-.79-.45.26.14.27.13.73-1.85-1.12-3.8-2.9-3.8H73l3,3V182.78l-3,3H411.59c4.53,0,9.27.4,13.78,0,.21,0,.42,0,.63,0C429.86,185.78,429.87,179.78,426,179.78Z"/><ellipse class="cls-1" cx="249.5" cy="183.87" rx="176.5" ry="16.31"/><path class="cls-2" d="M423,183.87c.05-.83.64-.58-.1-.4,0,0-1.3.77-1.86,1a38,38,0,0,1-6.77,2.14,199.59,199.59,0,0,1-24.76,4.16c-27,3.25-54.22,4.58-81.37,5.46-63.27,2.06-127.37,2-190.41-4.54-9.36-1-18.75-2.09-28-4a81.58,81.58,0,0,1-9.12-2.28c-1.36-.44-3.66-1.7-4.42-1.92s-.2-.56-.2.31-.66.56.2.31,3-1.48,4.42-1.92c6.82-2.23,14.07-3.3,21.16-4.32,25.42-3.65,51.23-5,76.87-6,34.59-1.4,69.23-1.69,103.83-1.08,30,.52,60,1.64,89.85,4.31,10.54.95,21.08,2,31.51,3.83,5.74,1,12.07,1.85,17.39,4.34.45.22,1.64.88,1.57.86.86.25.25.52.2-.31.23,3.84,6.23,3.86,6,0-.26-4.39-5.24-6.15-8.76-7.32-7.54-2.5-15.62-3.6-23.46-4.68-27.88-3.84-56.13-5.25-84.23-6.24q-56.32-2-112.71-.42c-30.13.81-60.39,2.12-90.35,5.72-8.93,1.08-17.95,2.23-26.68,4.46-3.81,1-9.86,2.22-12.07,6-5.75,9.77,19.81,12.71,24.17,13.42,26,4.25,52.42,5.67,78.65,6.83,37.53,1.66,75.13,2,112.68,1.23,31.49-.62,63.06-1.83,94.41-5,10.1-1,20.24-2.23,30.2-4.24,5-1,11.15-2,15.36-5.1a6,6,0,0,0,2.79-4.58C429.23,180,423.23,180,423,183.87Z"/></g><g id="drum-left"><path class="cls-3" d="M210.49,170.55a11.39,11.39,0,0,0-14-2L96.14,51.63A19.45,19.45,0,0,0,87,55c-4,3-4.25,9.47-4.25,9.47l108.74,109a11.3,11.3,0,0,0,1.15,13.14c4.15,4.61,11.5,4.75,16.43.32S214.63,175.15,210.49,170.55Z"/></g><g id="drum-right"><path class="cls-3" d="M288.48,170.55a11.39,11.39,0,0,1,14-2L402.83,51.63A19.45,19.45,0,0,1,412,55c4,3,4.26,9.47,4.26,9.47l-108.75,109a11.3,11.3,0,0,1-1.15,13.14c-4.14,4.61-11.5,4.75-16.43.32S284.34,175.15,288.48,170.55Z"/></g></svg>',
  ticks: '<svg id="ticks" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>ticks_3</title><g id="tick_5"><rect fill="#148787" x="418.76" y="144.37" width="26.12" height="208.95"/><line x1="431.82" y1="144.37" x2="431.82" y2="353.33" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g><g id="tick_4"><rect fill="#148787" x="346.21" y="144.37" width="26.12" height="208.95"/><line x1="359.27" y1="144.37" x2="359.27" y2="353.33" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g><g id="tick_3"><rect fill="#148787" x="273.66" y="144.37" width="26.12" height="208.95"/><line x1="286.72" y1="112.45" x2="286.72" y2="386.7" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g><g id="tick_2"><rect fill="#148787" x="201.11" y="144.37" width="26.12" height="208.95"/><line x1="214.17" y1="144.37" x2="214.17" y2="353.33" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g><g id="tick_1"><rect fill="#148787" x="128.55" y="144.37" width="26.12" height="208.95"/><line x1="141.61" y1="144.37" x2="141.61" y2="353.33" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g><g id="tick_0"><rect fill="#148787" x="56" y="144.37" width="26.12" height="208.95"/><line x1="69.06" y1="111" x2="69.06" y2="385.25" style="fill:none;stroke:#c7c9c9;stroke-miterlimit:10;stroke-width:4px"/></g></svg>'
}

function equalizerAnim () {
  let equalizer = document.querySelector('.equalizer')
  let style = document.createElement('style')

  let bars = []
  let barNums = 25

  let random = function (multi) {
    return (Math.random() * multi) + 'px'
  }

  for (let i=0; i < barNums; i++) {
    let bar = document.createElement('div')
    bar.classList.add('eq-bar')
    equalizer.appendChild(bar)

    let multi = i < 3  || i > barNums.length - 4 ? 70 : 140
    bar.style.animation = `move${i} ${Math.random() * 3 + 0.8}s infinite alternate`
    let animation = `@keyframes move${i} { 0% { height: ${random(multi)}; } 25% { height: ${random(multi)}; } 50% { height: ${random(multi)}; } 75% { height: ${random(multi)}; } 100% { height: ${random(multi)}; } }`
    style.innerHTML = style.innerHTML + animation
  }
  equalizer.appendChild(style)
}

function svgAnim () {
  let icons = document.querySelectorAll('.icon')
  if (icons.length) {
    icons[0].innerHTML = svgs.ticks
    icons[2].innerHTML = svgs.drum
  }

  if (SVG.supported && icons.length) {
    // animation #1
    let ticks = [1, 0, 0, 0, 0, 0]
    let tickHit, tick
    function hit () {
      tickHit = ticks.indexOf(1)
      tick = SVG.select(`#tick_${tickHit} rect`)
      tick.animate({ duration: 50, ease: '<', delay: '0.5s' }).attr({fill: '#71ee88'}).after(noHit)
    }
    function noHit () {
      tick.animate({duration: 50, ease: '<', delay: '0.5s' }).attr({fill: '#148787'}).after(hit)
      ticks.pop() === 1 ? ticks.splice(0, 0, 1) : ticks.splice(tickHit, 0, 0)
    }
    hit()

    // animation #3
    let drumLeft = SVG.select('#drum-left')
    drumLeft.animate({ ease: '<', delay: '0s' }).rotate(60)
                  .rotate(-120)
                  .rotate(0)
                  .loop()

    let drumRight = SVG.select('#drum-right')
    drumRight.animate({ ease: '<', delay: '0.5s' }).rotate(80)
                   .rotate(0)
                   .loop()
  }
}

(function init () {
  equalizerAnim()
  // svgAnim()
})()