I am using react with typescript. In my project, I have a video tag and over it, I have one SVG rect element. Now I want to do a blurry effect on SVG. I tried CSS filter:blur(8px); property but it's making the image completely black and not making it blur.
import './App.css';
const App = () => {
return <div className='container'>
<video autoPlay>
<source src={'https://www.w3schools.com/tags/movie.mp4'} />
</video>
<svg id="svg">
<rect className='rectangle' x={80} y={120} width={300} height={300} />
</svg>
</div>;
};
export default App;
css:
.rectangle{
filter:blur(8px);
}
Try to add some more styles to your svg:
.rectangle{
fill: rgba(0,0,0,0);
backdrop-filter: blur(8px);
}
Whats more, if you need a rectangle blur, you can do this simply using <div>. Set the width and height, then with position: absolute and values of top, left, right, bottom place it in right posiotion.
Finally apply CSS property backdrop-filter: blur(8px)