JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

JavaScript

const $trigger = $('#run-demo-button')
const $defs = $('#svg defs')

const animatePath = (dur, $path) => {
  const id = (`id ${Math.random()}`).replace('.', '')
  const $gradient = $(`<linearGradient id="${id}">
    <stop offset="0" stop-color="rgba(204, 199, 132, 1)">
      <animate dur="${dur}" attributeName="offset" fill="freeze" from="0" to="1" />
    </stop>
    <stop offset="0" stop-color="rgba(204, 199, 132, 0)">
      <animate dur="${dur}" attributeName="offset" fill="freeze" from="0" to="1" />
    </stop>
  </linearGradient>`)
  $path.removeAttr('fill')
  $defs.append($gradient)
  $path.attr('fill', `url(#${id})`)
}

$trigger.on('click', () => {
  animatePath('1s', $('#path1'))
  animatePath('2s', $('#path2'))
  animatePath('3s', $('#path3'))
})