HTML Logo

context.beginPath();
context.moveTo(505, 145);
context.quadraticCurveTo(355, 40, 260, 188);
context.lineTo(315, 220);
context.quadraticCurveTo(375, 120, 465, 190);
context.lineTo(505,145);
context.closePath;
context.fillStyle ='#ed4035';
context.fill();

context.beginPath();
context.moveTo(260,188);
context.quadraticCurveTo(230, 250, 265, 320);
context.lineTo(315, 290);
context.quadraticCurveTo(300, 255, 315, 220);
context.lineTo(260,188);
context.closePath();
context.fillStyle = '#f6bf02';
context.fill();

context.beginPath();
context.moveTo(265, 320);
context.quadraticCurveTo(360, 460, 500, 375);
context.lineTo(455, 335);
context.quadraticCurveTo(360, 375, 315, 290);
context.lineTo(265, 320);
context.closePath();
context.fillStyle = '#37a655';
context.fill();

context.beginPath();
context.moveTo(455, 335);
context.lineTo(500,375);
context.quadraticCurveTo(560, 335, 550, 225);
context.lineTo(400, 225);
context.lineTo(400, 285);
context.lineTo(490, 285);
context.quadraticCurveTo(490, 310, 455, 335);
context.closePath();
context.fillStyle = '#4385f5';
context.fill();


For my project, I chose to go the Google symbol.  To create this, I used the reference picture below to use the pen tool to trace the outline of the shapes, and then eye dropped the colors to get the exact colors.  When I looked at the drawing on Firefox, I made adjustments to my numbers to get a better curve and what I believed was a smoother curve.