JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">
  <polyline id="plainLine" class="st0" points="298,279 387.5,279 469.2,279 596,279"> </polyline>
  <polyline id="roofLine" class="st0" points="297.6,282 385.8,257.9 469.2,279 596,279"> </polyline>
    
</svg>
</body>

CSS

.st0 {
	fill: none;
	stroke: #e8154d;
	stroke-width: 8;
	stroke-miterlimit: 10;
}

JavaScript

TweenLite.to("#plainLine", 1, {morphSVG:"#roofLine"});