SOURCE

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke()

<div>
<!--   <div class="animate">
    <div class="a1">1</div>
    <div class="a2">2</div>
  </div> -->
  <svg width="200px" height="200px">
    <path d="M200 200 C 200 80 250 230" stroke="3" fill="none"/>
  </svg>
  <canvas width="200" height="200"></canvas>
</div>

.animete {
  width: 100%;
  height:100%;
  background-color:#efefef;
}
.a1 {
    width: 200px;
    height: 200px;
    background-color:#ccc;
  }
  .a2 {
    width: 200px;
    height: 200px;
    background-color:#999;
  }