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 });