JSFiddle - React, Tailwind, and code Playground

by Sean Coker

HTML

<svg width="100%" height="100%" viewBox="0 0 702 176" xml:space="preserve">
    <defs>
        <mask class="upload-mask" id="upload-1" x="0" y="0" width="100%" height="100%">
            <rect width="100%" height="100%" fill="white" style="transform: scaleX(0);"></rect>
        </mask>
        <path id="waveform-1" d="M0,88 L0,88 M1,88 M2,88 M3,88 L3.5,88 L4,87.83 L5,87.79 L6,87.81 L7,87.80 L8,87.83 L9,87.80 L10,87.83 L11,87.82 L12,87.82 L13,88 L13.5,88 L14,87.83 L15,87.82 L16,87.85 L17,87.82 L18,87.84 L19,87.85 L20,87.80 L21,87.81 L22,88 M23,88 L23.5,88 L24,87.84 L25,87.83 L26,87.83 L27,88 L27.5,88 L28,87.80 L29,87.83 L30,87.81 L31,87.80 L32,87.80 L33,87.83 L34,87.81 L35,87.81 L36,87.83 L37,87.85 L38,87.85 L39,87.84 L40,87.82 L41,87.79 L42,87.77 L43,87.80 L44,87.85 L45,87.84 L46,87.84 L47,87.84 L48,87.84 L49,88 L49.5,88 L50,87.83 L51,87.81 L52,87.82 L53,87.85 L54,87.82 L55,87.83 L56,87.83 L57,87.85 L58,87.81 L59,87.82 L60,87.81 L61,88 L61.5,88 L62,87.80 L63,87.77 L64,87.80 L65,87.83 L66,87.81 L67,87.81 L68,87.76 L69,87.84 L70,87.83 L71,87.80 L72,87.81 L73,87.84 L74,88 L74.5,88 L75,87.81 L76,87.83 L77,87.80 L78,87.77 L79,87.76 L80,87.79 L81,87.78 L82,87.77 L83,87.80 L84,87.82 L85,87.80 L86,87.76 L87,87.82 L88,87.73 L89,47.82 L90,56.36 L91,64.19 L92,70.84 L93,79.86 L94,82.54 L95,84.41 L96,87.11 L97,87.44 L98,48.03 L99,53.52 L100,58.97 L101,64.33 L102,76.01 L103,79.79 L104,84.34 L105,86.15 L106,86.93 L107,40.81 L108,47.90 L109,71.88 L110,82.14 L111,84.99 L112,87.17 L113,87.60 L114,87.69 L115,47.89 L116,53.71 L117,58.80 L118,64.05 L119,75.93 L120,79.90 L121,83.14 L122,85.71 L123,87.03 L124,87.68 L125,47.95 L126,53.66 L127,58.88 L128,67.80 L129,76.06 L130,79.83 L131,84.42 L132,86.30 L133,87.33 L134,48.26 L135,59.07 L136,64.20 L137,70.93 L138,79.89 L139,82.44 L140,86.19 L141,86.87 L142,40.83 L143,53.97 L144,71.87 L145,82.29 L146,86.04 L147,87.47 L148,87.67 L149,87.69 L150,40.44 L151,59.85 L152,76.25 L153,83.27 L154,86.12 L155,87.41 L156,87.68 L157,87.72 L158,87.74...

CSS

svg defs rect {
    /*transition: transform 0.3s ease-in;*/
}

JavaScript

var svg = document.querySelector('svg');
var mask = document.querySelector('svg defs rect');
var totalWidth = svg.getBoundingClientRect().width;

svg.addEventListener('mousemove', function(e) {
    var scale = e.offsetX / totalWidth;
    mask.style.transform = 'scaleX(' + scale + ')';
}, false);