CODEWITHSUNDEEP
htmlcsssvg
sdvnksv
sdvnksv

Reputation: 9668

Create a simple wave with SVG issue

I am trying to create a simple wave with SVG to put on my website. This is what I've come up with so far:

<svg height="100" width="500">
  <path d="M 0 50 
           Q 125 0, 250 50, 375 100, 500 50
           L 500 100
           L 0 100
           L 0 50
           Z" stroke="blue" stroke-width="1" fill="red" />
</svg>

https://jsfiddle.net/a5q41t26/

The problem is that I can't align the bottom of the path with the bottom of the lower wave to avoid the gap.

enter image description here

Any help would be appreciated.

Upvotes: 3

Views: 3277

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The first coordinate pair, of the two pairs in a Q path command, is a control point. The curve does not pass through the control point.

Have a look at the section on Quadratic bezier curves in Wikipedia.

Upvotes: 1

Related Questions