Recreating the Quicksilver Logo
First HTML coding Logo Design. Based on the brand, Quicksilver.
My Logo:
Original Logo:
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////
//#BCF6F5 light blue
//yellow #FFFED8
//Background
context.beginPath();
context.rect(0,0,800,600)
context.fillStyle = '#BCF6F5'
context.fill();
context.stroke();
//Big C Bezier
context.beginPath();
context.moveTo(450, 425);
context.bezierCurveTo(200, 450, 250, 100, 450, 200);
context.strokeStyle = '#FFFED8'
context.lineWidth = 30;
context.stroke();
//CURVE left top take 2
context.beginPath();
context.moveTo(155, 320);
context.bezierCurveTo(250,320, 220, 70, 555, 220);
context.lineTo(455, 205);
context.quadraticCurveTo(250, 135, 290, 325);
context.lineTo(160, 325);
context.strokeStyle = '#FFFED8'
context.fill();
context.fillStyle = '#FFFED8'
context.lineWidth = 20;
context.stroke();
//rectangle bottom left
context.beginPath();
context.rect(160,327,118,85);
context.fillStyle = '#FFFED8'
context.fill();
context.lineWidth = 33
context.stroke();
//bottom line
context.beginPath();
context.moveTo(164,425);
context.lineTo(650,425);
context.lineWidth = 40
context.strokeStyle = '#FFFED8';
context.lineCap = "round";
context.stroke();
//triangle
context.beginPath();
context.moveTo(225,350);
context.lineTo(200,400);
context.lineTo(300,400);
context.lineTo(225,350);
context.lineWidth = 20
context.closePath();
context.strokeStyle = '#FFFED8'
context.stroke();
//triangle FILLER
context.beginPath();
context.moveTo(280,215);
context.lineTo(200,320);
context.lineTo(290,350);
context.lineTo(280,215);
context.lineWidth = 15
context.closePath();
context.strokeStyle = '#FFFED8'
context.fillStyle = '#FFFED8'
context.fill();
context.stroke();
//middletriangle
context.beginPath();
context.moveTo(458,255);
context.lineTo(370,345);
context.lineTo(560,365);
context.lineTo(458,255);
context.fillStyle = '#FFFED8'
context.fill();
context.strokeStyle = '#FFFED8';
context.stroke();
//little middletriangle
context.beginPath();
context.moveTo(458,285);
context.lineTo(435,310);
context.lineTo(480,310);
context.lineTo(458,285);
context.fillStyle = '#BCF6F5'
context.fill();
context.strokeStyle = '#BCF6F5';
context.stroke();
//line under middle triangle
context.beginPath();
context.moveTo(365,360);
context.lineTo(600,360);
context.lineWidth = 30
context.strokeStyle = '#FFFED8';
context.lineCap = "round";
context.stroke();
//blue trianlge
context.beginPath();
context.moveTo(700,150);
context.lineTo(400,150);
context.lineTo(700,500);
context.lineTo(700,150);
context.fillStyle = '#BCF6F5'
context.fill();
context.strokeStyle = '#BCF6F5';
context.stroke();
//leftbabytriangle
context.beginPath();
context.moveTo(452,313); //bottom left
context.lineTo(456,308); //top
context.lineTo(457,313); //bottom right
context.lineTo(452,313); //bottom left
context.lineCap = "round";
context.closePath();
context.fillStyle = '#FFFED8'
context.fill();
context.lineWidth = 10
context.strokeStyle = '#FFFED8';
context.stroke();
//leftbabytriangle
context.beginPath();
context.moveTo(467,327); //bot left
context.lineTo(467,321); //top left
context.lineTo(472,321); //top right
context.lineTo(467,327); //bot left
context.lineCap = "round";
context.closePath();
context.fillStyle = '#BCF6F5'
context.fill();
context.lineWidth = 10
context.strokeStyle = '#BCF6F5';
context.stroke();
//////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment