In this animation markup, there is no use of CSS or JS for animation purposes.
For a long time, everybody has been talking about CSS and...
For further actions, you may consider blocking this person and/or reporting abuse
Hello, what about performance against CSS or Canvas animations? This is pure gold, I tell you, it's a shame nobody seems to support it, but I may just be missinformed, is this being used extensively in current web design?
Yes It is, infact there are many people using my code now a days.
Hello Daei_F,
Thanks for the complement :)
I am a big fan of CSS and Canvas and have done couple of experiment with them for this kind of designs. However, I would consider doing animation with SVG in every possible way as at the end its pure HTML which is natively working on its own without any other support like css and javascript. Also it will reduce load on browser's rendering engine. People will soon start supporting this as I am seeing this kind of animation on a lot of webpages.
Excellent post!! and it's sooo cool! I really love this kind of tutorials. Your interpretation of Bezier curve is super clear. I felt confused about this before. Figure with text is a good way. Looking forward to more tutorials from you.
I've learned multiple things here.
Firstly pure html animation isn't anything I've explored or even knew about so I'm thrilled to try this out.
Secondly, you explained the curves perfectly.
Thanks for sharing!
Very nice! How can the color be added to the animate tag to change the wave color, e.g. either with keyframes to suddenly alternate/flash green, then blue, then red, or to gradually transform the color via HTML hex code (#00ff00 to #00aaff for example)? I had a try using fill with values and keyframes timings with no success.
Interesting. Good post.
I just added waves to my site, I might use this technique.
Thanks
Feel free to use it. Let me know if you have any issue. I would be happy resolve.
Thanks. Appreciated. 👍
I'll give it a test & see how it works out.
I thing that GSAP animations is performs better than CSS. examples of the GSAP logo animations: adsspirit.com/portfolio/animated-s...
Thanks for the comment.
I do agree with you that Green Sock has a great library to deal with. However, the primary goal here is to avoid use Javascript for such simple animation that can be done with html. Also, code of this tutorial is not even 1% in size of script that GSAP has. So, I would prefer using such HTML based animation if I am going to design just a section with such animation on my personal portfolio or landing page like website.
Hope you got my point. :)