String waves with CSS

Question

Hi, I need string waves, sort of magnetic waves, just CSS. I saw some examples and none was as I would like, also could not adapt to the way I want. If anyone can help me thank!

Follow the example in the image of how I need it to be:

Answer 1

Let’s take steps, as you said SVG is an alternative I will give you a step by step how to understand and use. Logically you will have to read some documentation.

Documentation by Mozilla about <path> in the SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

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 are available in path elements: a cubic, called with C, and a quadratic, called with Q.

The cubic curve, C, is the slightly more complex curve. Cubic beziers are given 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. Note that the color is in the stroke and not in the fill, for it is a Path Each of these red dots at the end of the straight lines means an "Anchor point" (anchor point), vc will move it on the X Y axis individually to create its curves.

Here’s a simple simulator for you to play with 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 on the subject, they are well didactic, but are in English:

• https://vanseodesign.com/web-design/svg-paths-curve-commands/
• https://css-tricks.com/svg-path-syntax-illustrated-guide/

TIP: You can use software like Adobe Illustrator or Corel to create your Paths and then export them as SVG, or use online tools, I point out Figma. Or if you prefer logically you can do it in hand...