How do I generate a sine wave online?

Move the amplitude, wavelength, phase, and stroke sliders—the preview updates live. Click Copy SVG, Export SVG, or Export PNG when the curve matches what you need.

What is the difference between sine wave and sin wave?

They mean the same sinusoidal curve—“sin wave” is a common shorthand. This tool outputs a standard sine waveform as SVG.

Can I download a sine wave PNG?

Yes. Use Export PNG for a raster file, or Export SVG when you need a scalable vector. PNG is handy for slides and social images; SVG stays sharp at any size.

Is this a sinusoidal wave generator for audio?

No. This page creates static SVG graphics. For live sound frequency in Hertz from a microphone, use /frequency-detector or /voice-pitch-analyzer.

Does this make a 3D sine wave?

No. Output is a flat 2D SVG path. For twisting or layered line patterns, try /wwwhirl or other line generators in the tools directory.

How is wavelength related to frequency?

Wavelength here is pixels per cycle on the canvas—not audio Hz. In physics, frequency and wavelength are inversely related for a given wave speed; this tool only controls visual spacing.

Are files processed on a server?

No. All math and export run locally in your browser.

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.

Set wave shape: Adjust amplitude for height and wavelength for how stretched or compressed the cycle is.
Fine-tune phase and stroke: Shift phase to align peaks, then pick stroke width and color for your layout.
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.

Match your section width: Wavelength near one-third of your layout width often gives a balanced decorative rhythm.
Use phase for alignment: Set phase to 0 or 180 when you need a peak or trough to sit on a grid line.
Prefer SVG in UI: SVG stays sharp at any zoom; export PNG only when the destination requires raster.
Pair with wavy dividers: For filled section separators, browse /oooscillate or /sssquiggly in Line & Wave Generators.
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.

Frequently Asked Questions

Have questions? We have answers.

More tools from Line & Wave Generators.

View all Line & Wave Generators