Syntax error How to draw sine waves with HTML5 SVG?

How to draw sine waves with HTML5 SVG?

To draw sine waves with SVG, use the following that closely approximates half of a sine wave. I have used a cubic-bezier approximation. Use the <path> element.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Sine Waves</h2>
      <svg width = "150px" height = "200px" viewBox = "0 0 100 100">
         <path stroke = "#00FF00" fill = "none" d = "M0,0 C36.42,0,70.58,100,100,100" />
      </svg>
   </body>
</html>

Output

Updated on: 2021-12-16T10:30:46+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements