I want to make a background animated gradient like this ones protoyped on Figma.
Picture of Animated Gradient
I saw some solutions of animated gradients in CSS like the one of this page, but it only generates a common linear-gradient and changes the background position.
What i'm looking for is a mesh gradient like the Figma examples (is builted with shapes, a blur layer and some noise) and animate it like the Figma prototype.
It can be done with pure CSS? or what could be a nice solution?
You'd definitely need something alongside CSS to animate it like you desire, JS would be a good bet. This is really a project in itself, but take a look at What a Mesh. It does what you're looking for, I don't think it's actually available for public/commercial use, but you might get some inspiration for how to approach it.
https://whatamesh.vercel.app/
Related
Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.
Basically, I was wondering if it were possible to create a detailed gradient type border like the one in the picture, and apply it to a simple box.
I made the preview in photoshop.
I don't believe so at this time. Here is a previous question about Gradient Mesh, which is a feature of Adobe Illustrator that does somethign similar.
I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It was made using Illustrator and had 2 of its effects: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Then I made a Clipping Mask. Here is its link https://dl.dropbox.com/u/99185097/metalTex.svg. When I normally open it, it views correctly, but when I use it as a background in CSS3 for my HTML5 page, it doesn't open. I am sure it's not my CSS coding's fault because when I use another very simple svg as my background, it opens. I think it could be the Illustrator effects, maybe they don't view when you use it as a background. Also these effects make it of 4.46mb. Please suggest a solution. Making it a png wouldn't work because sometimes it needs to cover extremely long pages.
Please expand your vector file properly, save and then export it as svg file again and go for background. It may work now.
I would like to recreate the background gradient shown here on my web page. Unlike a simple linear gradient it doesn't work well repeated (as an image) such that it can fill a variable length. Can anyone recommend a method to achieve the desired effect?
I might be missing the idea but there is something you can start with here: http://jsfiddle.net/yvsV7/
Are there any libraries or examples how to create pie style progress bars with CSS3?
Canvas or SVG would be a better fit than CSS for this. (Due to lack of circle segments). Raphaël might be a good choice if you go for SVG. Here's a (non-animated) pie chart, which will show you how to draw segments.
another great choice for SVG based graphs is d3.js. It is the successor to the Protovis library, but is much more flexible and much better written (and thus better preforming). Also, you can style some properties of SVG elements with CSS3, but not as much as you can style HTML. However, CSS is still useful, and you can still, for example, use transitions on some properties. Take a look at the W3C's Styling SVG document (although be aware that it just discusses CSS2).
Pie chart is possible in pure css but animating it may not be easy.