JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div id="app">
<svg width="100%" height="50vh" viewBox="0 0 331 259" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5;">
      <g transform="matrix(1,0,0,1,-3163.82,-1347.75)">
          <g id="vue-conflogo" transform="matrix(0.258594,0,0,0.32375,3163.82,1347.75)">
              <rect x="0" y="0" width="1280" height="800" style="fill:white;"/>
              <g transform="matrix(5.59153,0,0,4.46621,-2926.01,-1446.34)">
                  <g transform="matrix(1,0,0,0.735586,-1366.36,111.03)">
                      <rect x="1946" :y="421 - treeBase_1" width="1.569" :height="treeBase_1" style="fill:rgb(52,73,95);"/>
                  </g>
                  <g transform="matrix(1,0,0,0.735586,-1340.66,111.03)">
                      <rect x="1946" :y="421 - treeBase_2" width="1.569" :height="treeBase_2" style="fill:rgb(52,73,95);"/>
                  </g>
                  <g :transform="logoTransformation" :opacity="logoOpacity">
                      <g transform="matrix(0.230171,0,0,0.230171,20.6509,11.8073)">
                          <path d="M100.5,187L0,14L201,14L100.5,187ZM100.5,118L161,14L40,14L100.5,118Z" style="fill:rgb(58,185,130);"/>
                      </g>
                      <path d="M49.154,15.03L57.708,15.03L43.783,38.967L29.858,15.03L38.412,15.03L43.783,24.236L49.154,15.03Z" style="fill:rgb(52,73,95);"/>
                  </g>
                  <g transform="matrix(0.25,0,0,0.25,577.25,193.34)">
                      <circle cx="363" cy="715" :r="sunRadius" style="fill:none;stroke:rgb(58,185,130);stroke-width:15.22px;"/>
                  </g>
                  <g transform="matrix(0.25,0,0,0.25,489.674,212.34)">
                      <circle cx="363" cy="715" :r="treeRadius_1_2" style="fill:rgb(58,185,130);"/>
                  </g>
                  <g...

JavaScript

function bounce (progress) {
  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
    }
  }
}

function circ (progress) {
  return 1 - Math.sin(Math.acos(progress))
}

function back (x) {
  return progress => Math.pow(progress, 2) * ((x + 1) * progress - x)
}

function makeEaseInOut (delta) {
  return function (progress) {
    if (progress < .5) {
      return delta(2*progress) / 2
    }
    else {
      return (2 - delta(2*(1-progress))) / 2
    }
  }
}

function makeEaseOut (delta) {
  return function (progress) {
    return 1 - delta(1 - progress)
  }
}

const bounceEaseOut = makeEaseOut(bounce)
const backEaseOut = pushBack => makeEaseOut(back(pushBack))
const circEaseInOut = makeEaseInOut(circ)
const circEaseOut = makeEaseOut(circ)

function wait (duration) {
  return new Promise(resolve => setTimeout(() => resolve(), duration))
}

function animate (duration, delta, step) {
  return new Promise(
    function (resolve, reject) {
      const start = performance.now()

      const animation = function (t) {
        let progress = (t - start) / duration

        if (progress > 1) progress = 1

        step(delta(progress))

        if (progress !== 1) {
          window.requestAnimationFrame(animation)
        } else {
          resolve()
        }
      }
      window.requestAnimationFrame(animation)
    }
  )
}

function createStep (obj, property, from, to) {
  const absTo = Math.abs(to - from)
  return progress => {
    obj[property] = to > from
      ? from + (absTo * progress)
      : from - (absTo * progress)
  }
}

function combineSteps (...steps) {
  return function (progress) {
    steps.forEach(step => step(progress))
  }
}

function createAnimation (duration, delta, step) {
  return () => animate(duration, delta, step)
}

function* toGenerator (iterable) {
  yield* iterable
}

function stagger (animations, delay) {
  const...