JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div id="fixed"></div>


<br /><br /><br /><br /><br /><br />
<svg x="0px" y="0px" height="500px" width="500px" viewbox="0 0 500 500">
    <defs>
        <filter id="f1" x="-200%" y="-200%" width="400%" height="800%">
            <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feComposite in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <line x1="10" y1="205" x2="400" y2="200" 
        style="stroke:rgb(255,0,0); stroke-width:20" filter="url(#f1)" />
    <line x1="200" y1="50" x2="220" y2="300" 
        style="stroke:rgb(255,0,255);stroke-width:20" filter="url(#f1)" />


</svg>

CSS

#fixed {
	width: 500px;
  height: 500px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1680' height='240'><defs><filter id='f1' width='400%25' height='800%25'><feOffset result='offOut' in='SourceAlpha' dx='5' dy='5' /><feGaussianBlur result='blurOut' in='offOut' stdDeviation='3' /><feComposite in='SourceGraphic' in2='blurOut' mode='normal' /></filter></defs><path filter='url(%23f1)' style='opacity:0.15' fill='%23000000' d='M1680,0H0v127.8c106.9,25.7,229.5,44.4,344.8,49.6c116,5.2,215.4-3,302.6-14.6c114.4-15.1,213.8-36,332.2-49.5 c118.5-13.5,262.4-19.3,419.3-3.9c98.5,9.7,197.8,27.8,281.1,50.7V0z' /><path fill='%23A8E2C1' d='M1680,0H0v127.8c106.9,25.7,229.5,44.4,344.8,49.6c116,5.2,215.4-3,302.6-14.6c114.4-15.1,213.8-36,332.2-49.5 c118.5-13.5,262.4-19.3,419.3-3.9c98.5,9.7,197.8,27.8,281.1,50.7V0z' /><path fill='%23FFFFFF' d='M0,101.8c73.2,16.7,148.1,29.8,221.1,37.9c145.7,16.1,272.2,11.7,383.7,1.7c146.3-13.1,274.3-35.5,425.5-46.1 c151.2-10.5,333.5-8.2,529.7,25.6c40.3,6.9,80.5,15.1,120,24.4V0H0V101.8z' /></svg>");
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
  background-color:#eee;
}