Uwarp
Sine wave preview
Live SVG waveform — 5.0 cycles across 800px.
Wave controls
Adjust amplitude, wavelength, phase, and stroke.
Amplitude
Wavelength (length)
Phase
Stroke width

Help Us Improve

—

(—)

Online sine wave generator

Generate a sine wave online with amplitude, wavelength, phase, and stroke controls. Preview the SVG waveform, copy markup, or export sine wave PNG files.

What is a sine wave generator?

A sine wave generator draws a smooth sinusoidal curve you can use as decorative line art, science diagrams, or UI accents. This online tool builds a clean SVG path from amplitude, wavelength (length), phase, and stroke width—then lets you copy the markup or download SVG and PNG. It is a visual waveform creator for graphics, not an audio oscillator; for live Hz from a microphone, try /frequency-detector.

Sine wave generator features

Create and export sinusoidal SVG waves in the browser.

  • Live SVG preview

    See the sin waveform update as you move amplitude, wavelength, phase, or stroke.

  • Amplitude and wavelength

    Control wave height and horizontal length—how many cycles fit across the canvas.

  • Phase shift

    Rotate the curve along the x-axis from 0 to 360 degrees without redrawing by hand.

  • Stroke styling

    Set line width and stroke color for light or dark backgrounds.

  • Copy SVG markup

    One-click copy for pasting into Figma, Illustrator, or inline HTML.

  • SVG and PNG export

    Download vector SVG or raster sine wave PNG for slides, docs, and social assets.

How to generate a sine wave

Create a sinusoidal curve in three steps.

  1. Set wave shape

    Adjust amplitude for height and wavelength for how stretched or compressed the cycle is.

  2. Fine-tune phase and stroke

    Shift phase to align peaks, then pick stroke width and color for your layout.

  3. Copy or export

    Copy SVG code, export SVG for crisp scaling, or export PNG when you need a flat image file.

Tips for sine wave graphics

Get cleaner SVG wave output.
  • 01

    Match your section width

    Wavelength near one-third of your layout width often gives a balanced decorative rhythm.

  • 02

    Use phase for alignment

    Set phase to 0 or 180 when you need a peak or trough to sit on a grid line.

  • 03

    Prefer SVG in UI

    SVG stays sharp at any zoom; export PNG only when the destination requires raster.

  • 04

    Pair with wavy dividers

    For filled section separators, browse /oooscillate or /sssquiggly in Line & Wave Generators.

  • 05

    Dark mode strokes

    Light stroke colors on dark pages—try #fafafa or your brand accent hex.

Great for

Common uses for generated sine waves.

  • Science and math slides

    Illustrate a sinusoidal curve without redrawing in vector apps.

  • Hero backgrounds

    Subtle svg wave lines behind headlines or product shots.

  • UI decoration

    Organic motion cues, dividers, and loading motifs.

  • Design handoff

    Copy SVG into Figma or code without tracing a screenshot.

  • Social and blog graphics

    Export PNG sine wave images for posts that need a raster file.

Why use this sine wave creator

Browser-based sinusoidal generator benefits.

  • No install

    Generate sine wave online—controls and preview in one page.

  • Vector-first

    True SVG path output, not a flattened screenshot by default.

  • Instant feedback

    Every slider updates the preview immediately.

  • Free export

    Unlimited SVG copy and downloads.

  • Honest scope

    Visual waveform graphics—not 3D models or live audio synthesis.

Technical details

How the sinusoidal generator works.
Curve math
y = centerY − amplitude × sin(2π × x / wavelength + phase).
Canvas size
Default 800×200 viewBox; path sampled for smooth curves.
Controls
Amplitude, wavelength (length), phase (degrees), stroke width, stroke color.
Outputs
SVG markup string, .svg download, .png raster export.
Processing
Client-side only—nothing uploaded to a server.

Sources & References

Authoritative references on the sine waveform, SVG path rendering, and the trigonometric math this generator uses to produce sinusoidal curves.
  • “A sine wave or sinusoid is a mathematical curve that describes a smooth periodic oscillation. It is defined by the function y = A sin(2πx / λ + φ), where A is amplitude, λ is wavelength, and φ is phase.”
    — Wikipedia — Sine wave

    Sine wave — sinusoidal function: The generator draws a sine wave using the formula y = centerY − amplitude × sin(2π × x / wavelength + phase), sampling points along the x-axis and constructing an SVG path. en.wikipedia.org/wiki/Sine_wave

  • “The SVG `<path>` element is used to define a shape by combining straight and curved line segments. Cubic and quadratic Bézier curves enable smooth sinusoidal rendering.”
    — MDN Web Docs — SVG Path

    SVG path element for curve rendering: The sinusoidal curve is output as an SVG `<path>` element with a sequence of line or curve commands, producing a clean vector that scales to any size without quality loss. developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

  • “Trigonometric functions such as sine and cosine are fundamental for generating periodic waveforms, circular motion, and oscillating patterns in computer graphics and procedural art.”
    — Various — Computer graphics resources

    Trigonometry in computer graphics: The tool samples the sine function at regular intervals across the canvas width, building a series of coordinate pairs that form the sinusoidal waveform for SVG and PNG export. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin

Frequently Asked Questions

Quick answers about this tool—open a question to read more.