Article Categories

Selected Reading

How to draw sine waves with HTML5 SVG?

SVG Javascript Web Development Front End Scripts

To draw sine waves with HTML5 SVG, you can use the <path> element with cubic Bezier curves to closely approximate the smooth curves of a sine wave. This approach provides precise control over wave shape and amplitude.

Basic Sine Wave Example

Here's how to create a simple sine wave using SVG path with cubic Bezier approximation:

<!DOCTYPE html>
<html>
<head>
    <title>SVG Sine Waves</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML5 SVG Sine Wave</h2>
    <svg width="400" height="200" viewBox="0 0 400 200">
        <!-- Single sine wave curve -->
        <path stroke="#00FF00" fill="none" stroke-width="2" 
              d="M0,100 C50,50 100,50 150,100 C200,150 250,150 300,100 C350,50 400,50 400,100" />
    </svg>
</body>
</html>

Multiple Sine Waves with Different Properties

You can create multiple waves with different amplitudes, frequencies, and colors:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Sine Waves</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>Multiple HTML5 SVG Sine Waves</h2>
    <svg width="500" height="300" viewBox="0 0 500 300">
        <!-- Large amplitude wave -->
        <path stroke="#FF0000" fill="none" stroke-width="3" 
              d="M0,150 C62.5,75 125,75 187.5,150 C250,225 312.5,225 375,150 C437.5,75 500,75 500,150" />
        
        <!-- Medium amplitude wave -->
        <path stroke="#0000FF" fill="none" stroke-width="2" 
              d="M0,150 C62.5,100 125,100 187.5,150 C250,200 312.5,200 375,150 C437.5,100 500,100 500,150" />
        
        <!-- Small amplitude wave -->
        <path stroke="#00FF00" fill="none" stroke-width="2" 
              d="M0,150 C62.5,125 125,125 187.5,150 C250,175 312.5,175 375,150 C437.5,125 500,125 500,150" />
    </svg>
</body>
</html>

Understanding the Path Data

The path d attribute uses these commands:

M - Move to starting point
C - Cubic Bezier curve with control points

For a sine wave pattern: M0,centerY C x1,y1 x2,y2 x3,centerY where control points create the curve shape.

Animated Sine Wave

You can animate sine waves using SVG animations:

<!DOCTYPE html>
<html>
<head>
    <title>Animated Sine Wave</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>Animated HTML5 SVG Sine Wave</h2>
    <svg width="400" height="200" viewBox="0 0 400 200">
        <path stroke="#FF6600" fill="none" stroke-width="3">
            <animate attributeName="d" 
                     values="M0,100 C50,50 100,50 150,100 C200,150 250,150 300,100 C350,50 400,50 400,100;
                             M0,100 C50,150 100,150 150,100 C200,50 250,50 300,100 C350,150 400,150 400,100;
                             M0,100 C50,50 100,50 150,100 C200,150 250,150 300,100 C350,50 400,50 400,100" 
                     dur="2s" 
                     repeatCount="indefinite" />
        </path>
    </svg>
</body>
</html>

Key Properties

Property	Description	Example
`stroke`	Wave color	`"#FF0000"`
`stroke-width`	Wave thickness	`"2"`
`fill`	Interior fill (use "none")	`"none"`
`viewBox`	Coordinate system	`"0 0 400 200"`

Conclusion

SVG paths with cubic Bezier curves provide an effective way to draw sine waves in HTML5. You can customize amplitude, frequency, and styling to create various wave effects for data visualization or decorative purposes.

Anvi Jain

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next