JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<h3></h3>
<svg width="1400" height="300">

   <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
         <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.clipartbest.com/cliparts/ncB/Xnz/ncBXnzpei.png" x="0" y="0" width="100" height="100"></image>
      </pattern>

      <linearGradient id="grad" y2="50%">
         <stop offset="0" stop-color="red" />
         <stop offset="1" stop-color="blue" />
      </linearGradient>

   </defs>
   <polygon xmlns="http://www.w3.org/2000/svg" points="0,0 1366,0 1366,175 970,390 120,340 0,10 0,0" fill="url(#grad)">
      <animate id="animation-to-original" begin="indefinite" fill="freeze" attributeName="points" dur="1500ms" to="0,0 1366,0 1366,175 970,390 120,340 0,10 0,0"></animate>
      <animate id="animation-to-check1" begin="indefinite" fill="freeze" attributeName="points" dur="1500ms" to="0,0 1366,0 1366,175 970,290 80,270 0,10 0,0"></animate>
      <animate id="animation-to-check2" begin="indefinite" fill="freeze" attributeName="points" dur="1500ms" to="0,0 1366,0 1366,175 970,190 40,210 0,10 0,0"></animate>
      <animate id="animation-to-check3" begin="indefinite" fill="freeze" attributeName="points" dur="1500ms" to="0,0 1366,0 1366,175 970,110 0,140 0,10 0,0"></animate>
  ...

CSS

svg {
   position: fixed;
   top: 0;
   left: 0;
}

h3 {
   position: fixed;
   top: 300px;
   left: 0;
}

JavaScript

/*
@id {7eeff186-cfb4-f7c3-21f2-a15f210dca49}
@name FakeSmile
@version 0.3.0
@description SMIL implementation in ECMAScript
@creator David Leunen ([email protected])
@homepageURL http://leunen.me/fakesmile/
@ff_min_version 2.0
@ff_max_version 3.*
*/
// ==UserScript==
// @name smil
// @namespace svg.smil
// ==/UserScript==

/* MIT or GPLv3 Licenses */

/*
Copyright 2008 David Leunen
Copyright 2012 Helder Magalhaes
*/

/**
 * Milliseconds Per Frame - relation between animation smoothness and resources usage:
 * 83 for ~12fps (standard quality web animation; low CPU usage; slightly jumpy; recommended for discrete or slow-motion animations);
 * 67 for ~15fps (high quality web animation; reasonable resources usage; recommended for most use-cases);
 * 40 for  25fps ("cine"-look; recommended for good quality animations on television systems);
 * 33 for ~30fps (half LCD refresh rate; recommended for high quality animations on desktop systems);
 * 25 for  40fps (very smooth animation; recommended for high quality animations on dedicated desktop systems);
 * 17 for ~60fps (LCD refresh rate; high CPU and system overhead; only recommended for very high quality animations running on high-end systems).
 * Lower values are *not* recommended - may cause an overall negative impact on the Operating System and a relevant energy consumption increase!
 * References:
 * http://animation.about.com/od/faqs/f/faq_fpsnumber.htm
 * http://en.wikipedia.org/wiki/Frame_rate#Frame_rates_in_film_and_television
 * https://www.nczonline.net/blog/2011/12/14/timer-resolution-in-browsers/
 */
var mpf = 67;
var splinePrecision = 25;

var svgns="http://www.w3.org/2000/svg";
var smilanimns="http://www.w3.org/2001/smil-animation";
var smil2ns="http://www.w3.org/2001/SMIL20";
var smil21ns="http://www.w3.org/2005/SMIL21";
var smil3ns="http://www.w3.org/ns/SMIL30";
var timesheetns="http://www.w3.org/2007/07/SMIL30/Timesheets";
var xlinkns="http://www.w3.org/1999/xlink";

var animators = new Array(); //...