svg 2次ベジェ曲線と グラデーションの練習

そもそも

• 大文字=絶対座標指定、小文字=相対座標指定
• Q(q)は2次ベジェ曲線で、制御点と終点のの2点のみ指定

から、理解していませんでした。

特に、2次ベジェ曲線は制御店の座標指定が難しいので https://b1san-blog.com/post/svg/svg-path/ を参考にすると良いと思います。

上記はとても丁寧にまとめられています。

<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- y1=y2=0%で横方向グラデーション定義 -->
    <linearGradient id="grad_2" x1="0%" y1="0%" x2="100%" y2="0%">
      <!--始点(0%) -->
      <stop offset="0%"   style="stop-color:#00f;stop-opacity:0"/>
      <!--終点(100%) -->
      <stop offset="100%" style="stop-color:#00f;stop-opacity:1"/>
    </linearGradient>
  </defs>
<!-- 小文字のqは相対座標指定による2次ベジェ曲線 -->
  <path d="M0,0 q50,100 400,100 l0,30 q-350 0 -400 100 z"
            fill="url(#grad_1)" />
</svg>

↑こう書くと、↓こう表示されます