var canvas1 = document.getElementById("canvas1");
var context = canvas1.getContext("2d");
canvas1.width = 400;
canvas1.height = 400;
context.beginPath();
context.moveTo(0, 360);
context.lineTo(200, 400);
context.lineTo(400, 360);
context.lineTo(350, 280);
context.lineTo(200, 310);
context.lineTo(50, 280);
context.lineTo(0, 360);
var grd1 = context.createLinearGradient(0, 360, 400, 360);
grd1.addColorStop(0, '#92f9cb');
grd1.addColorStop(1, '#1dc2fa');
context.fillStyle = grd1;
context.fill();
context.closePath();
context.beginPath();
context.moveTo(50, 260);
context.lineTo(200, 290);
context.lineTo(350, 260);
context.lineTo(300, 180);
context.lineTo(200, 200);
context.lineTo(100, 180);
context.lineTo(50, 260);
var grd1 = context.createLinearGradient(50, 260, 350, 260);
grd1.addColorStop(0, '#fa7198');
grd1.addColorStop(1, '#d5b73a');
context.fillStyle = grd1;
context.fill();
context.closePath();
context.beginPath();
context.moveTo(100, 160);
context.lineTo(200, 180);
context.lineTo(300, 160);
context.lineTo(250, 90);
context.lineTo(200, 100);
context.lineTo(150, 90);
context.lineTo(100, 160);
var grd1 = context.createLinearGradient(100, 160, 300, 160);
grd1.addColorStop(0, '#06f5ff');
grd1.addColorStop(1, '#052e79');
context.fillStyle = grd1;
context.fill();
context.closePath();
context.beginPath();
context.moveTo(150, 75);
context.lineTo(200, 85);
context.lineTo(250, 75);
context.lineTo(200,0);
context.lineTo(150, 75);
var grd1 = context.createLinearGradient(150, 75, 250, 75);
grd1.addColorStop(0, '#c524ff');
grd1.addColorStop(1, '#d6a6d9');
context.fillStyle = grd1;
context.fill();
context.closePath();
context.beginPath();
context.moveTo(200, 0);
context.lineTo(200, 400);
context.lineWidth = 0.3;
context.strokeStyle = "#051243";
context.stroke();
context.closePath();