Realistic Water Effect without JavaScript - HTML/CSS Only

Create a realistic water flowing effect with HTML and CSS using custom svg turbulence filter. No JavaScript needed!
Source Code: redstapler.co/...
SVG Turbulence Filter Article: bit.ly/2MbRKuM
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#SVG #CSS #WebDesign

[@brawndo8726]

This is one of the most amazing things I've seen in web development over the last several years.

[@aperson4051]

It's just a filter ...

[@brawndo8726]

@@aperson4051 It's just a filter, but used to create an impressive effect.

[@jacobtran4010]

@@brawndo8726 just a filter really.

[@GergiH]

To all who says "it's just a filter", I'd bet my ass you would've "just" make it a video loop instead and "just" set it as the background. It's way more efficient this way and I guess a lot of us didn't even know these type of things can be achieved with only CSS (and good masking).

[@jacobtran4010]

@@GergiH there isn't a good usage for this man.

[@anakinskywalkerrr]

No music, straight to the point, 100% will sub for that

[@jmbeatsbbx]

I have no idea how did you come up with this idea. But it was mind blowing!

[@Andrey-il8rh]

SVG filters is like a separate universe. Maybe someone could recommend a good overview tutorial on the topic?

[@DerJP]

Gabriel Klenner that‘s what I thought as well

[@loltool5513]

@Gabriel Klenner shesays did a vid on it. it was a scroling texture

[@Valhalla43]

The linked Sara Soueidan article on feTurbulence is very good would recommend

[@xNiqueish]

I'm in web development for years and I haven't seen anything like this before. Mind blowing

[@JasonStewart1124]

Awesome tutorial . Beware that the svg is heavy on processor load. Leaving it open for a few minutes got my computer nice and toasty.

[@MarieAmeliaFreyaAster]

svg is heavy on processor load?!? you sure?

[@XxMrBryanxX]

What!?! You created this? This mans a scientist

[@cortarelva]

This is me clapping my hands to you dear Sir.

[@tazbully0]

Okay I think this ia the best time to return in learning again html, css and this svg things. It is so wonderful to watch.

[@ShayanBinShad]

I was 99.9% sure that it's SVG Turbulence Filter 😺 but 0.1% confused how did you got the cool background to present?!! 🧐😯😱 Nice explanation. 😀👍

[@irfanrona5479]

Extremely out of mind. You're Genius !

[@hakzima]

Pixar CEO “Red Stapler was able to build this in a cave! with boxes of scraps”

[@sudofox]

"Well I'm sorry. I'm not Red Stapler."

[@smiley2827]

I am not even frontend but your documentation reading skill made even backend, DevOps guy subscribed to you, So keep up ;)

[@jamilamini7807]

Css is going to next level One day we will call it a programming language wait for sometime

[@IkikaeruRaimei]

Or not, this effect is just simple. If you were to do that realistically (Not like in the video where it is just an image deformation), it needs a shader...

[@chickencamp7154]

I can't see that background in the same way as I did initially xD

[@sakuragi9607]

Clear explanation and it’s a video with audio not text thank you 👏👏❣️

[@ithinkimhipster502]

I'm so lucky to have come across this video. The filter tag you applied to the avg is the exact effect effect I'm looking for. I want to recreate the visual effect that occurs when you animate an image that's drawn slightly differently in each frame.

[@josephemris]

AMAZING!!!!! Simply amazing!!! Great video, new follower here

[@hassanhaider2380]

Very soothing background and very soothing voice too!

[@brunovaz]

I'm scared to check the canIuse of these filters

[@FlorianDootz]

Looks like only safari can't handle the feTurbulence-element.

[@MrLaxr-op4be]

Next level Idea!

[@AstroDogeDX]

That's incredible!

[@guilhermesmuller]

Very interesting technique, thanks for sharing it in such a short video.

[@oldbootz]

I love this! Great presentation!

[@pilotgfx]

wow this is overpowered. i feel completely useless due to the fact i never used svg filters and i've played with hmtl/css for 20 years. definitely some potential here.

[@itdat9767]

That's amazing! Thank you so much.

[@gordonruthven7656]

Absolutely superb!

[@JohnLittler]

This feature is only good as a clever trick. Every time we try to incorporate even simple animations into our web apps the added CPU usage is just not worth it.

[@nofacee94]

But these CSS animations can run on the GPU.

[@derekacosta1584]

@@nofacee94 Making them pointless on anything other than desktop or non-webgl platforms

[@K-Fed]

@@derekacosta1584 Why's that? Mobile devices have more than adequate GPUs in them for this, and coding using CSS has less boilerplate than a WebGL variant.

[@sugarbooty]

@@K-Fed This is a desktop only kinda thing in my mind, why the hell would you want your phone to slow down and get hot when you open up a website? You'd go to another one

[@K-Fed]

@@sugarbooty That entirely depends on the application and the implementation. If you're serving up a rich SPA that doesn't have a huge amount of content, then the CPU usage will be very reasonable. That's especially true if you scale the graphic size to the screen size of the mobile device. I tried the demo on my old Samsung Note 4 and it's perfectly fluid and doesn't cause any slowness of the device. On my 10 year old laptop, my CPU barely reaches more than 2% and I don't notice any performance impacts with the tab open and in focus. You also have to keep in mind that performance isn't crucial for a lot of applications. For something like Amazon or Google search results, having a fast and snappy website may increase retention and conversions. A leisure website where people just mindless browse cool images and videos after their day is complete won't need to be optimized the same way to shave a few milliseconds on page load or save and handful of CPU cycles.

[@ne9835]

Hats off to you my man!

[@Mosiah369]

Wow! spectacular!

[@Omsos116]

Thats mindblowing

[@rideroundandstuff]

This is amazing. Thank you so much for sharing!

[@rolandgerard6064]

This is really amazing, of course subscribed and a big 👍

[@lonnybulldozer8426]

It's so beautiful, I cried tears of joy. I saw the face of God in the peaceful flow of the water. I don't believe this is just HTML and CSS, I believe you are a prophet sent down from the heavens to guide us through these trying times. I'm willing to fight for you, just tell us all what to do. Why are we here?

[@mohammadoulabi4212]

lol

[@Andrey-il8rh]

🙏🙏🙏

[@MaxxSkywalker]

*prophet www.dictionary.com/browse/prophet?s=t

[@lonnybulldozer8426]

@@MaxxSkywalker Which is exactly what I wrote. Your point being? Either way, this was a just an experiment of mine, as I use you sniveling swine to learn more about your predictable and grotesque behaviors. For you see, I am one of the biggest, if not the biggest troll in the game. I take on many forms, and many names, to say the least. You have all dealt with me in some way or another. I decided to write something positive for once, mostly as a concrete test to determine the extent to which I've been shadow-banned from KZbin. It's become quite clear KZbin/Google are a mission to silence anything they deem 'negative', perhaps in an effort to create a false utopia. I'm actually a white-night, a fighter for justice and free speech, tackling the biggest issues facing the planet and the human race as a whole. BOW TO ME, scum.

[@MaxxSkywalker]

@@lonnybulldozer8426 Huh? I was just correcting your spelling, dude. Chill out. You had "profit", which is something else entirely. Nice of you to fix it, and then go into a non sequitur, though.

[@JassarDev]

Thank you for this, appreciate it! I wish there was a bit more explanation of what's going on after you inserted the svg, but I'll read the documentation.

[@Maxetkd]

Whilst searching 's meaning, I read ''But there are some SVG properties that cannot be animated through CSS that can through SVG. An SVG path, for example, comes with a set of data (a d="" attribute) that defines that path's shape. This data can be modified and animated through SMIL, but not CSS.'' So is this HTML/CSS or HTML/CSS/SMIL?

[@alexholker1309]

Very interesting. I've used SVG filters and masks before (using feColorMatrix to recolour a character's football uniform), but haven't looked into other filters like this one.

[@DevMoSofi]

Keep the great work up

[@jamesblackwell2067]

wow, i didnt know this was possible

[@pavkey88]

This is great but I wonder how hard this is on the processor. Reminds me how we used to fake stuff in flash but this is way cooler

[@domnik9062]

This and That just an assumption: Ripple effects like these are normally realized with a Normal/Displacementmap as seen in this video. So the effect is pretty surly achieved with shaders and shaders run on gpu not cpu

[@AntonioNoack]

Jason Stewart 1 week ago: Awesome tutorial . Beware that the svg is heavy on processor load. Leaving it open for a few minutes got my computer nice and toasty.

[@Huge_jass]

This moment when you made most beautiful game in html and css

[@SouravendraKrishnaDeb]

I'd love to know if implementing this in an actual website is too resource intensive or not.

[@tapwater424]

It is

[@SouravendraKrishnaDeb]

@@tapwater424 rip.

[@elProdigio]

It's magic.

[@visao338]

😱😱😭Thanks so much. I'm struggling with this problem

[@024ashutoshsharma3]

I don't know why its not visible when i am trying to run it on the browser, can anyone tell why this happened

[@peridotleo4333]

Instant subscription!

[@sai78206]

This is something next level which I never achieve 😂😂

[@aprimic]

Copy paste

[@Andrey-il8rh]

In fact it's very easy to achieve

[@Kriyos0666]

And finally i need this for minecraft rtx technology

[@rjprmr]

This is fantastic but be aware it will max out the GPU on the average system!

[@alekskenins]

You could make a bunch of copies of the entire filter with slightly different parameters using CSS animation keyframes, and alternate between them. This way the browser will only have to render most of the animation once. Edit: When I'm back at my computer I'll make a codepen and post it here.

[@DoctorMandible]

@@alekskenins bump

[@Andrey-il8rh]

bump

[@cduran1983]

@@alekskenins could you please 🙏

[@nickschmitt8594]

@@alekskenins hi

[@SciDOCMBC]

a really great job 👍

[@hanstransjuicer8911]

Awsome. Just awsome.

[@jaycal1920]

To the point simple. Nice.

[@malou5118]

wau amazing mind blowing

[@FirdavsiGameDev]

Awesome! thanks dude!

[@Valitzu777]

Awesome, thank you. Is it, or can it be made responsive?

[@RomanticPopPunk]

Would it be better if you just use a gif as background?

[@RedStapler_channel]

never use large gif background. it has extreamly large file size due to inefficient encoding. For example, a 2 MB video background could turn into a whopping 10MB+ in gif.

[@alimertc]

@@RedStapler_channel it has small file sizes with videos that have more static pixels

[@forgettd]

The basic way to make such a background is to use a video in mp4 format.

[@manmanmanichfindekeinennam7613]

I think the point of this Video is to show whats possible with only CSS and HTML. It becomes much more interesting when you have been a developer for +10 years. Its freaking great to see what CSS can do Nowadays. Back then, you had to do stuff like this with flash, a programming language. This CSS effect is stunning because HTML is only a markup language, css only a stylesheets language and no one ever expected that html and css would be able get Stuff like this done. This Video shows how easy Webdevelopment has become with html5 and css3. From the programmer perpective is webdev more interesting and fun than ever before. But from a practically view is this effect quiete dumb. I cant imagine a single Website which needs something like this. Its only for fun and shouldnt be done for serious business.

[@vishal_taywade]

Amazing 👌💐

[@arshaddesignverx]

Awesome tutorial

[@furbi963]

Simple, bonito y hermoso 😍👌

[@TheAnna2511]

I need a help, I used this code on my website, but I have more elements under this and at the bottom of the page I have a blank space, and when I open inspect page, there I can see svg file... I am new in the web design, so I hope someone know what I mean :D

[@davidhernandez1699]

Super nice! Is there any way to control the flow direction of the water?

[@rvsamsung77]

This is one of the most amazing things I've seen in web design for the last couple of days

[@boiimcfacto2364]

Nice work literally copying the top comment.

[@bilbobeutlin3405]

dude thats so awsome

[@kryptonnn652]

Wow, amazing.

[@lillaraczszabo6720]

Thank you, it helped a lot! :)

[@Galya892011]

Cool! Gotta try!

[@jinnielee7285]

beautiful

[@sannikeshachari3912]

How to add 3Dpanorina effect in website

[@robinbrowne5419]

Very nice. Thanks.

[@akshaychordia8724]

So nice❤️

[@tfr]

This is html 6, man, I wish I had 10 rtx titans to compute this. Nice

[@SK-pp2fj]

Can you say what screen recorder you are using ❓

[@2011BIRR]

very nice!

[@MarkoKozlica]

You are great! Thx :D

[@adityalakkad8795]

How I can set as a background in my website and please also provide a mobile friendly interface how to do help l loved your video very very very much

[@fadlanzunima5236]

Fantastic

[@tofik2450]

Nice!

[@-JackER]

very nice job!

[@yenenehmulatu5707]

Respect👍

[@MindsMusing]

Great....U complete Me!!

[@yishayhaz]

"HTML/CSS only" 0:57 i will photoshop..

[@hnccox]

He also used a camera to take a photo of the sea

[@tru3prodigy]

He also travelled to the location. 😒

[@jopo6445]

This clearly requires a pc and text editor too. Smh

[@kamrulahsan06]

How about electricity?

[@jayrajz7986]

yes you better not follow his advice , because it requires a brain too.

[@lingard533]

What text editor you are using here??

[@domnik9062]

Reachester Jala visual studio code

[@ChiemekaNwogu]

please reply me. where did you get your own sea image

[@Virtualmix]

A wonderful device called "camera".

[@darkillusion9669]

Virtualmix 😂😂😂

[@ChiemekaNwogu]

@@Virtualmix I don't have Photoshop on my pc and can't pay for it, any other way to edit the picture , cause you said save it in Photoshop as transparent png

[@Virtualmix]

​@@ChiemekaNwogu Yes, install GIMP, it's a free opensource software as capable as Photoshop. After opening your image in Gimp, go to "Layer > Transparency > Add alpha channel" to set the transparency. After that, export your image as PNG.

[@SecondTremble]

“If you think this is a video back ground, you’re wrong. It’s Chuck Testa

[@thereborne5219]

when will u create life into that

[@megakiller90qc]

Can we just put a gif ?

[@RedStapler_channel]

no, gif at this size and framerate will greatly slow your website loading time.

[@megakiller90qc]

@@RedStapler_channel Oh ! ok thx ! :) btw nice vidéo !

[@jhordanloaisigaflores6237]

explica lo que haces con photoshop nunca lo he usado. Please.

[@-JackER]

simplemente separa el agua de lo demás, las piedras, el arbusto, etc. entonces le aplica la turbulencia solo al agua, de lo contrario se vería toda la imagen moviendose

[@ElliotGeno]

SVG is really powerful!

[@jhordanloaisigaflores6237]

@@-JackER gracias ahora a probarlo.

[@beeurd]

brb, just changing my name to Jon Snow because I clearly know nothing. 🤯

[@CrimsonBane]

Wow, this earned a sub

[@ChiemekaNwogu]

mine isn't working

[@pengekcs]

wonder how much cpu cycles (percentage) this effect burns ;) great stuff though!

[@domnik9062]

azhat GPU

[@ARTSSSergei]

класс!!!!

[@mrsai4740]

But does it work in IE 🤔

[@FatsFalafel]

You already know the answer to this.

[@philrod1]

Why do we still need to ask this? 😥

[@mrsai4740]

@@philrod1 people still use ie. Stubborn people

[@ytpu1]

Yes But IE sucks

[@jamilamini7807]

Why are you using IE

[@mnthrld]

It is simple and no need to know css and html, Just install SEUS PTGI E9

[@zhamshidkaliev]

woooow

[@qbasic16]

Awesome! I will use this to improve the gore effect (hidden easteregg) on our company's website 😄

[@TheDVDwr]

Why not just use a gif ?

[@samuelmatheson9655]

Holy big brain

[@DANNYFIGDESIGNS]

Wow.

[@burnblue]

dope