HTML5 SVG के साथ साइन वेव्स कैसे ड्रॉ करें?

SVG के साथ साइन वेव्स

SVG के साथ साइन वेव्स ड्रॉ करने के लिए, निम्नलिखित का उपयोग करें जो आधी साइन वेव का बारीकी से अनुमान लगाता है। मैंने क्यूबिक-बेजियर अनुमान का उपयोग किया है। <path> एलिमेंट का उपयोग करें।

उदाहरण

<!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>

आउटपुट

क्यूबिक बेजियर कर्व (C कमांड) SVG पाथ में साइन वेव्स का अनुमान लगाता है।