Creating and animation graphics in CSS

Hello, I want to learn how to make shapes/designs in css (as shown in the image, PS: I obtained the image from another thread), like custom made design without using images etc. In one thread, I noticed people were talking about SVGs, anyone has a resource to recommend where I can learn all this stuff and canvas stuff please. There are a bunch of animations that I saw on the web that require the knowledge of canvas/svg and a bunch of mathematical stuff, like when we move our cursor, we have small animations related to the motion. I wanted to add this knowledge of drawing things under my css belt :c.