0

4 hour of search for wave in html, svg or canvas but didn't find anything what would look like in a picture.

How can I create wave like this? with smooth ending and filled with color ?

enter image description here

Kintamasis
  • 265
  • 6
  • 27
  • 4 hours really? That's strange as I've just typed `html canvas curved line` into google and there's thousands of relevant results. Even one from this site: https://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas (Duplicate) – pokeybit Nov 24 '17 at 19:23
  • It's pretty bad etiquette to ask a question like this. download sketch or inkscape and create an svg on there. Or visit the hundreds of tutorials on drawing SVGs – Matthew Brent Nov 24 '17 at 19:27
  • @pokeybit show me in your url there is the same wave as I meansion – Kintamasis Nov 24 '17 at 19:34
  • @Mantas'MG'G. That would be K3N's snippet. – Mr Lister Nov 24 '17 at 19:44
  • While I respect the observation that just a little more research using google would have yielded results for OP, I have to disagree about that answer providing anything useful for the above. It's not even close. All OP needs is a few [bezier curves](https://codepen.io/anon/pen/rYKoVj?editors=0010). That question is way over complicated for what OP is trying to achieve. – Joseph Marikle Nov 24 '17 at 19:48

1 Answers1

1

This shape can be achieved using bezierCurveTo() in canvas. I'm sure the shape is possible in SVG as well, but I'm not as familiar with it, so below is a canvas demonstration.

The snippet is borrowed and adapted from the MDN article. Basically, you want a bezier curve that keeps the control points on the same y-axis as the start and end points. Make the curve more or less dramatic by moving the control points along the x-axis. The farther the first control point and second control point are to the start and end points (respectively) the more dramatic the curve will be.

I would start by building the graph in canvas using straight lines and adapting them to be bezier curves after the fact. 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var hw = 10, ho = hw / 2;

var x1 = 50, y1 = 20,
    x2 = 230, y2 = 100,
    cp1x = 120, cp1y = 20,
    cp2x = 160, cp2y = 100;
    

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);
ctx.stroke();

ctx.fillStyle = 'blue';
// start point
ctx.fillRect(x1 - ho, y1 - ho, hw, hw);
// end point
ctx.fillRect(x2 - ho, y2 - ho, hw, hw);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(cp1x - ho, cp1y - ho, hw, hw);
// control point two
ctx.fillRect(cp2x - ho, cp2y - ho, hw, hw);
<canvas id="canvas"></canvas>
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129