JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<svg height="480" width="640">
    <defs>
        <linearGradient spreadMethod="pad" y2="0" x2="0" y1="1" x1="0" id="gradient">
            <stop stop-opacity="1" stop-color="#459192" offset="0%"></stop>
            <stop stop-opacity="1" stop-color="#64e8e8" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g transform="translate(50,30)">
        <g>
            <path d="M0,152.06321449078666L40.667707105301524,101.20713055280055L102.8429400493888,109.00584642689356L224.71742623351656,43.4684449548468L266.0628538472537,122.6888343686381L275.2585452818823,8.385968575455479L291.0966198520345,2.842170943040401e-14L304.46172939365846,4.4513754763272L356.2935398884077,180.23959910215586L356.3772059201915,189.9527587826904L381.514085694707,107.9487915644412L425.4735122061388,221.28856292738948L462.5717727520159,98.17690661377044L493.86951142305924,72.16161194341495L539.5118356990714,225L591.5825645916294,225L630.7964842510956,225L710.0133515582526,136.59497833690034L769.7697613117141,108.17194759095892L841.7803820349345,206.23140366445685L878.8865852580822,66.32432009187244L947.9674899981256,145.96753145064469L1100,196.2246176332411" class="line"></path>
            <path d="M356.2935398884077,180.23959910215586L356.3772059201915,189.9527587826904L381.514085694707,107.9487915644412L425.4735122061388,221.28856292738948L462.5717727520159,98.17690661377044L493.86951142305924,72.16161194341495L539.5118356990714,225L591.5825645916294,225L630.7964842510956,225L710.0133515582526,136.59497833690034L769.7697613117141,108.17194759095892L841.7803820349345,206.23140366445685L841.7803820349345,225L769.7697613117141,225L710.0133515582526,225L630.7964842510956,225L591.5825645916294,225L539.5118356990714,225L493.86951142305924,225L462.5717727520159,225L425.4735122061388,225L381.514085694707,225L356.3772059201915,225L356.2935398884077,225Z" style="opacity: 1;" class="area"></path>
        </g>
</svg>

CSS

path.line {
    fill: none;
    stroke: #ccc;
}
path.area {
    stroke: none;
    fill: url(#gradient);
    opacity: 1;
}