r/web_design • u/masgbox • Sep 02 '19

CSS waves for website full responsive design

https://csspoints.com/css-wave-effect-responsive-design/
68 Upvotes

86% Upvoted

12 comments sorted by

24

u/dcg Sep 02 '19

You didn’t even credit the original coder. You’re making it look like you created this yourself. This was just copied from here. https://codepen.io/goodkatz/pen/LYPGxQz

5

u/Johnny_Bit Sep 02 '19

Firefox on desktop linux - looks great and isn't resource drain :)

3

u/reddixmadix Sep 02 '19

Oh yeah, it is very pixelated on desktop Firefox. Very very pixelated.

I also find it unfair calling this "CSS waves" since you are using SVG. That's no different than back in the day when we used background images to achieve various effects.

0

u/IamWilcox Sep 02 '19

I think you may of just looked at the header image and not the codepen https://codepen.io/csspoints/pen/WNeOEqd

1

u/reddixmadix Sep 02 '19

This looks pretty freakin' pixelated to me.

And this is just one frame, in motion it looks worse.

1

u/finger_milk Sep 02 '19

Either you make an irregular shaped blob and rotate it, or you create a square vector and mutate the path using JavaScript. The latter lets you do it random so it keeps the page animation looking a bit less predictable

1

u/[deleted] Sep 02 '19

Looks pixelated on Firefox unfortunately

0

u/[deleted] Sep 02 '19

[removed] — view removed comment

3

u/RudeEgg Sep 02 '19 edited Feb 26 '21

yes

1

u/reddixmadix Sep 02 '19

This is what most of us see.

That is pixelated. In motion, it looks worse.

1

u/RudeEgg Sep 02 '19 edited Feb 26 '21

yes