JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 900" enable-background="new 0 0 1440 900" xml:space="preserve" id="map">
    <path id="WaterPath-3" fill="none" stroke="#73A2A9" stroke-width="15" stroke-miterlimit="10" d="M769,438.9h-20
			c-23.2,0-42.1,18.8-42.1,42.1v135.2c0,23.2-18.8,42.1-42.1,42.1H302.4"/>
</svg>

JavaScript

var map = Snap(document.getElementById('map'));

var waterPath = map.select('#WaterPath-3');

// Testing snap works
waterPath.attr({ opacity: 0.95 });