JSFiddle - React, Tailwind, and code Playground

by Guddu Kumar

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://45.76.94.162/pre-gea/ext/bower_components/gif.js/dist/gif.js"></script>
<script src="https://45.76.94.162/pre-gea/ext/bower_components/gif.js/dist/gif.worker.js"></script>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<svg class="graph" width="960" height="500" id="grafico"><g transform="translate(40,20)"><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="grafLinea"><g class="tick" opacity="1" transform="translate(0,420.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,356.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,293.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,229.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,165.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,102.5)"><line stroke="#000" x2="900"></line></g><g class="tick" opacity="1" transform="translate(0,38.5)"><line stroke="#000" x2="900"></line></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-2,420.5H0.5V0.5H-2"></path><g class="tick" opacity="1" transform="translate(0,420.5)"><line stroke="#000" x2="-2"></line><text fill="#000" x="-5" dy="0.32em">0.0</text></g><g class="tick" opacity="1" transform="translate(0,356.5)"><line stroke="#000" x2="-2"></line><text fill="#000" x="-5" dy="0.32em">0.5</text></g><g class="tick" opacity="1" transform="translate(0,293.5)"><line stroke="#000" x2="-2"></line><text fill="#000" x="-5" dy="0.32em">1.0</text></g><g class="tick" opacity="1" transform="translate(0,229.5)"><line stroke="#000" x2="-2"></line><text fill="#000" x="-5" dy="0.32em">1.5</text></g><g class="tick" opacity="1" transform="translate(0,165.5)"><line stroke="#000"...

JavaScript

function esportaGif() {
debugger

   function saveData (data,fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";


   var url = window.URL.createObjectURL(data);
   a.href = url;
   a.download = fileName;
   a.click();
   window.URL.revokeObjectURL(url);

   };

  var html = $("#grafico")[0];

  var serialized = new XMLSerializer().serializeToString(html);
  var svg = new Blob([serialized], {type: "image/svg+xml"});
  var url = URL.createObjectURL(svg);

  var gif = new GIF({
      workers: 2,
      quality: 1,
      repeat:0,
      debug: true,
      background: '#fff',
      transparent: 'rgba(0,0,0,0)',
      dither: "FloydSteinberg-serpentine",
      workerScript : "gif.worker.js"
   });

   var img = new Image();
   img.onload = function(){

      gif.addFrame(img);
      gif.on('finished',function(blob) {
         saveData(blob, "grafico.gif");
      });
      gif.render();
    };
    img.src = url;

}