JSFiddle - React, Tailwind, and code Playground

HTML

<div class="svg1"><svg height="300" version="1.1" width="835" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: 0%;"><path fill="url(#154230-_ffffff-rgba_255_255_255_0_)" stroke="none" d="M1.25,300L1,150C1,150,40.42265996162184,164.31126255601257,74,150C107.11737647620859,135.88478213653556,110.43735243322607,69.40552969071886,146,75C182.05657322742357,80.67217128579894,182.50013324868073,225.0986262436594,219,225C254.99986857664365,224.90272480077428,270.38554417492054,104.5134581341436,291,75C311.9007677115389,45.0766327251044,327.9789829194345,-5.893753344143944,364,0C399.52757849042075,5.813016996963886,400.47242150957925,144.18698300303612,436,150C472.0210170805655,155.89375334414396,475.3735382720785,89.1954595438341,509,75C542.1658252658951,60.99899880608143,547.8341747341049,89.00100119391857,581,75C614.6264617279215,60.804540456165896,617.9789829194345,-5.893753344143944,654,0C689.5275784904208,5.813016996963886,690.4724215095792,144.18698300303612,726,150C762.0210170805655,155.89375334414396,799,75,799,75L799,300Z" opacity="1" fill-opacity="1" style="-webkip-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;"></path></svg>
</div>

<div class="svg2"><svg height="300" version="1.1" width="835" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: 0%;"><path fill="url(#154230-_ffffff-rgba_255_255_255_0_)" stroke="none"...

JavaScript

var NewPath = "M1.25,300L1,150C1,150,40.42265996162184,164.31126255601257,74,150C107.11737647620859,135.88478213653556,110.00021378795589,75.12406726852379,146,75C182.49978324276694,74.87420957496893,182.50021675723306,150.12579042503108,219,150C254.9997862120441,149.8759327314762,255.43735243322607,69.40552969071886,291,75C327.05657322742354,80.67217128579894,327.94342677257646,219.32782871420108,364,225C399.56264756677393,230.59447030928115,410.97950168566626,175.8838688009042,436,150C461.3680052353662,123.75663302130546,475.3735382720785,89.1954595438341,509,75C542.1658252658951,60.99899880608143,547.8341747341049,89.00100119391857,581,75C614.6264617279215,60.804540456165896,617.9789829194345,-5.893753344143944,654,0C689.5275784904208,5.813016996963886,690.4724215095792,144.18698300303612,726,150C762.0210170805655,155.89375334414396,799,75,799,75L799,300Z";

var OrigPath = "M1.25,300L1,150C1,150,40.42265996162184,164.31126255601257,74,150C107.11737647620859,135.88478213653556,110.43735243322607,69.40552969071886,146,75C182.05657322742357,80.67217128579894,182.50013324868073,225.0986262436594,219,225C254.99986857664365,224.90272480077428,270.38554417492054,104.5134581341436,291,75C311.9007677115389,45.0766327251044,327.9789829194345,-5.893753344143944,364,0C399.52757849042075,5.813016996963886,400.47242150957925,144.18698300303612,436,150C472.0210170805655,155.89375334414396,475.3735382720785,89.1954595438341,509,75C542.1658252658951,60.99899880608143,547.8341747341049,89.00100119391857,581,75C614.6264617279215,60.804540456165896,617.9789829194345,-5.893753344143944,654,0C689.5275784904208,5.813016996963886,690.4724215095792,144.18698300303612,726,150C762.0210170805655,155.89375334414396,799,75,799,75L799,300Z";

$('.update').click(function(){
$('.svg1 svg path').attr('d',NewPath);
$('.svg2 svg path').append('<animate attributeName="stroke-dasharray" from="'+OrigPath+'" to="'+NewPath+' dur="4" repeatCount="1">');
});