if you think this is a video background you're wrong it's only HTML and CSS and
this tutorial I'm going to show you how to create a realistic water effect using
SVG turbulence filter and CSS let's check it out
so first let's create a div
and then set this image as background in CSS
next I'm going to create a mask layer I will use Photoshop to remove all non
water part of the image you can use quick selection tools for this job
use shift button to add a selection sometimes if you pick up more area than
you need so you can use the alternate button to remove it
once you got all the non water part press Delete
then you can use the eraser tools for detailing
and then save the file as transparent PNG
now I'm going to create a new div inside the first
and then set the mask image that we created as background
you won't see any change yet but the next step is to key we will use SVG
turbulence filter basically it's a filter that creates a turbulence effect
on any element. The splash you see here it was a circle before the filter was
applied you can create a turbulence filter using SVG tag
then set up the turbulence frequency and some characteristic then applied to any
element using CSS filter property okay let's start first create SVG tag
and a future tag inside
we will set the origin position to 0 and size to 100%
then create feTurbulence tag here you can define the characteristic of the
turbulence using attribute like seed and frequency it's easier to understand each
of them in action there is a nice article on codrop with demo that you
can try out you can find link in the video description box
next create if a displacement map tag here you can set the future scale amount
and input we are set it to sourceGraphic which means we'll use the source
element that the future was applied on as input
then create animate tag and linked it with our filter id
we will animate the baseFrequency to create a ripple effect
we will set the duration to 60 seconds
the keyTimes and values are basically the
same as keyframes in CSS. What I've just typed means I have divided the animation
into 3 keyframes. First the baseFrequency is at 0.02 and 0.06
Then at the half of the animation is 0.04 and 0.08
Then at the end is back to 0.02 and 0.06 again
I will also set the repeat count to indefinite to create a loop
and finally applied filter in CSS using the id of the filter tag
and that's all for this tutorial you can find a code in the video description box
if you love this and want to see more dev tips and tutorials subscribe our
channel to stay tuned thanks for watching see you next time bye