Process Line layout issue - html

Question

I am trying to build one page from my layout but I have some hard time. I have to create a Process line as shown on the picture. I am trying also to make it responsive but i have the feeling that my code is very messy.
.process-steps h2 { font-family: "Rubik-Regular", sans-serif; font-size: 40px; color: #1e1e22; margin: 55px 0 70px 0; }
.process-steps .green-span { font-family: "Rubik-Bold", sans-serif; color: #23b58a; }
.actual-graph { position: relative; display: flex; justify-content: center; align-items: center; }
.actual-graph h4 { font-family: "Rubik-Medium", sans-serif; font-size: 18px; color: #2a2a2e; line-height: 28px; }
.actual-graph p { font-family: "Rubik-Regular", sans-serif; font-size: 16px; color: #46464c; line-height: 22px; }
.step-1 { position: absolute; width: 25%; right: 86%; bottom: 0; left: 0; top: 42%; }
.step-2 { position: absolute; width: 25%; left: 13%; bottom: 0; right: 0; top: -7.8%; }
.step-3 { position: absolute; width: 25%; left: 37.5%; bottom: 0; right: 0; top: 42%; }
.step-4 { position: absolute; width: 25%; left: 61%; bottom: 0; right: 0; top: -7.8%; }
.step-5 { position: absolute; width: 25%; left: 85%; bottom: 0; right: 0; top: 42%; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="process-steps">
<div class="container">
<h2><span class="green-span">5 Steps</span> Process</h2>
<div class="graph-container">
<div class="actual-graph">
<img src="https://s17.postimg.org/bhxksjwkf/graph.png" width="1171" height="191" title="someText" alt="someText" class="img-responsive">
<div class="step-1">
<h4>Create your account</h4>
<p>The process begins when you
<br>create an account with Sellr.</p>
</div>
<!-- step-1 -->
<div class="step-2">
<h4>Select Store Picks</h4>
<p>Select 20-30 products from
<br>each product category that you
<br>want to promote.</p>
</div>
<div class="step-3">
<h4>Wait for processing</h4>
<p>We ensure high quality
<br>information on your store picks
<br>in 7-10 business days.</p>
</div>
<div class="step-4">
<h4>Install Sellr Tablets</h4>
<p>Place Sellr tablets throughout
<br>your store.</p>
</div>
<div class="step-5">
<h4>Start increasing sales!</h4>
<p>Your store is now equipped to
<br>start increasing sales for your
<br>selected products.</p>
</div>
</div>
</div>
</div>
<!-- container -->
</section>
<!-- process-steps -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

[https://codepen.io/sheetalsinghwd/pen/LYYMOam]
var canvas, ctx, p = function (x,y) {
return { x:x, y:y };
};
// drawing
$(function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.lineCap = 'round';
ctx.lineWidth = 4;
ctx.strokeStyle = 'rgba(50,30,120,0.5)';
ctx.beginPath();
ctx.wavy(p(80, 120), p(650, 120), 2, 12, 4);
ctx.stroke();
});
CanvasRenderingContext2D.prototype.wavy = function(from, to, frequency, amplitude, step, negative)
{
var cx = 0, cy = 0,
fx = from.x, fy = from.y,
tx = to.x, ty = to.y,
i = 0, waveOffsetLength = 0,
ang = Math.atan2(ty - fy, tx - fx),
distance = Math.sqrt((fx - tx) * (fx - tx) + (fy - ty) * (fy - ty)),
a = amplitude * (!negative ? 1 : -1),
f = Math.PI * frequency;
for (i; i <= distance; i += step)
{
waveOffsetLength = Math.sin((i / distance) * f) * a;
cx = from.x + Math.cos(ang) * i + Math.cos(ang - Math.PI/2) * waveOffsetLength;
cy = from.y + Math.sin(ang) * i + Math.sin(ang - Math.PI/2) * waveOffsetLength;
i > 0 ? this.lineTo(cx, cy) : this.moveTo(cx, cy);
}
}
use this for canvas
you can refer to this link.. even i am working on that.. i have just tried to create wavy lines through css and javascript`