Skip to main content

SVG Wave Generator

Live Site ⇗ Github ⇗
Preview of Wave Generator
Preview of Wave Generator

I started to work on this Wave Generator for a few reasons:

  1. The website I wanted to use for wave generation was down for a few days.
  2. I wanted to experiment coding with AI.
  3. I wanted a way to add unique designs to my websites.

So I got started, this was the first project I really tried to embrace Vibe Coding. While I don't fully Vibe Code anything (I only ever use chatbots rather than AI IDEs as I like to keep context windows as small as possible), I thought this project would be a great place to experiment.

The process for creating this with AI was farily simple, but the most important aspect for this was learning (1) how pahts in HTML work and (2) the difference between Cubic and Quadratic curves.

Bézier Curve Differences
Bézier TypeCoordinate System
Cubic

"Cubic Béziers take in two control points for each point. Therefore, to create a cubic Bézier, three sets of coordinates need to be specified."


This means for each point on the SVG path, we actually need a set of three coordinates. For Example,


<path d="M 0 10 C 30 60, 60 120, 120 10" stroke="black" fill="transparent" />

This path contains:


  • Start Point: (X1, Y1) = "C 30 60"
  • Mid Point: (X2, Y2) = "60 120"
  • End Point: (X, Y) = "120 0"
Quadratic

"Requires one control point which determines the slope of the curve at both the start point and the end point. It takes two parameters: the control point and the end point of the curve."

This means for each point on the SVG path, we need to have a set of two coordinates. For Example,



<d="M 0 10 Q 30 60, 60 60" stroke="black" fill="transparent" />
<d="M 0 10 Q 30 60, 60 60 T 120 0" stroke="black" fill="transparent" />

This path contains:


  • Start Point: (X1, Y1) = "Q 30 60"
  • End Point: (X, Y) = "60 60"

Note: The "T 120 0" coordinate strings together another curve of the same slope at the specified endpoint.

Notes:
  • As you can see the two curves look differently despite using the same start and end points. In the Cubic path the Bézier function "creates a smooth curve that transfers from the slope established at the beginning of the line, to the slope at the other end." Meanwhile, the Quadratic function calculates a symmetrical curve between two points.
  • Coordinates in a SVG path have the same type of grid as a web document. The starting point (written as "M 0 0") is at the top left corner.
  • Please read MDN SVG Paths Documentation for more information on syntax and line drawing commands of the path element.
  • Please read Slopes in Mathematics if you do not understand the concept of slopes and graphing.

With this knolwedge in hand I went back and forth with Claude until I was able to get the functionaloity I was looking for. It gave nice looking SVGs that can be copy pasted into markup super easily.

Example Waves