Yes, I don't see why not. You could easily nest DIVs, where the animated gradient background is applied to the outer DIV and the transparent background is applied to the inner DIV. Alternatively, you can place multiple backgrounds comma separated in the background-image property, like so: background-image: url('image_1.svg'), url(image_2.png);
@@boydriver2978 That's a good idea, but since that's not happening today, I also have an article I wrote, just scroll down to the "Layering multiple background images" section. www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/
Hi, 2 years on so maybe you won't see this comment. Great video. Your values are named colours ie red,ble,green etc but in xml colour is represented by statements, such as #rrggbb. If you wanted to mix up the colours could you do that using "jade geen" or could you change the colours using statements please?
I chose to use HTML color names (blue, green, etc.) because it's much easier to understand the color you'd expect for this demo. I personally opt for hex codes, but any valid HTML color code or color name would work.
and elements behave the same way. However, if you meant STROKE or OUTLINE of a shape when you said PATH, then instead of placing the gradient ID in the FILL, you'd place it in the STROKE attribute and ensure it has a STROKE-WIDTH.
Thank you! Really enjoyed the trick where it seems more like a random blob instead of a linear or radial gradient.
You're welcome Teodors! Yeah, it is a nice simple trick to achieve dancing colors rather than the basic gradients we're accustomed to.
Great man , I didn't know we can do this stuff so easily with svg.
SVG is indeed powerful!
thanks, i am experimenting with svg's by making logos and animating the gradients is a great addition to what i am doing
Sounds like a great application
Never thought I could combine both gradient and animation! By the way a question, which vscode extension are you using? It looks super convenient
It's called 'SVG' and it's by 'Jock'
@@MattVisiwig I cant get that extension to work in win 10, do you know if there some tweak required please?
@@TACDetective I do not. It's worked for me on W8 and W11. I don't have many other extensions, so maybe you have a conflict?
Wow this reminds me of the beautiful stripe homepage! Thanks for the video!
Thanks for the compliment :)
Great explanation and video!
Glad you thought so :)
Thanks for the tutorial!
You're welcome!
could an image on a transparent background be overlaid on this for a hero section please?
Yes, I don't see why not. You could easily nest DIVs, where the animated gradient background is applied to the outer DIV and the transparent background is applied to the inner DIV.
Alternatively, you can place multiple backgrounds comma separated in the background-image property, like so:
background-image: url('image_1.svg'), url(image_2.png);
@@MattVisiwig maybe that could be your next video.......please?
@@boydriver2978 That's a good idea, but since that's not happening today, I also have an article I wrote, just scroll down to the "Layering multiple background images" section.
www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/
Thank you very much!!
You're welcome Daniel
Nice, thank you !
Glad you like it!
Hi, 2 years on so maybe you won't see this comment. Great video. Your values are named colours ie red,ble,green etc but in xml colour is represented by statements, such as #rrggbb. If you wanted to mix up the colours could you do that using "jade geen" or could you change the colours using statements please?
I chose to use HTML color names (blue, green, etc.) because it's much easier to understand the color you'd expect for this demo. I personally opt for hex codes, but any valid HTML color code or color name would work.
How would you put this on a path?
and elements behave the same way. However, if you meant STROKE or OUTLINE of a shape when you said PATH, then instead of placing the gradient ID in the FILL, you'd place it in the STROKE attribute and ensure it has a STROKE-WIDTH.
How is an SVG even made using only HTML? Or is it? I need a whole course on the SVG element before I can animate them.
SVG looks like HTML, but it's technically XML. But inline SVG code will work right inside HTML code.
@@MattVisiwig I have heard of this XML, but I am so lazy. I never Google it.
Emphasis on the first syllable in ATtribute. Unlike "a tribute", which is what I'm hearing here.