Hello, I need waves on strings, kind of magnetic waves, just with CSS. I saw some examples and none was as I would like, I also could not adapt to the way I want. If anyone can help me thank you!
Follow the example in the image of how I need it to be:
Let's take steps, as you said that SVG is an alternative, I'll give you a step-by-step of how to understand and use. Of course you will have to read some documentation.
Mozilla documentation on <path> in SVG: link
There are three different commands you can use to create curves smooth Two of these curves are Bézier curves and the third is a "arc" or part of a circle. ... There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic, called with C, and a quadratic, called with Q.
The cubic curve, C, is the curve a little more complex. Cubic Beziers receive two control points for each point. Therefore, to create a Cubic Bezier, you need to specify three sets of coordinates.
Cx1 y1, x2 y2, xy (ou c dx1 dy1, dx2 dy2, dx dy)
Basic example of Curvede Path corresponding to the image. Notice that the color is in stroke and not in fill , because it is a Path Each of these red dots at the end of the straight lines means an anchor point, move it on the XY axis individually to create your curves.
Here is a simple simulator for you to play with these anchor points
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg" style="background-color: blue;">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="white" fill="transparent"/>
<path d="M10 50 C 20 20, 60 20, 95 80 S 160 160, 180 50" stroke="white" style="stroke-opacity: .3; " fill="transparent"/>
</svg>Articles for you to read more about the subject, they are well didactic, but they are in English:
TIP: You can use software such as Adobe Illustrator or Corel to create your Paths and then export them as SVG, or use tools online, I point to Figma. Or if you prefer logically you can do it by hand ...