HTML5 Logo Tracing
How do I make an html5 logo tracing?
What is a html5 logo tracing? How do you make a html5 logo tracing? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.
HTML5 Logo Tracing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Logo Tracing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <center> <canvas id="canvas" height="400" width="400"></canvas>
</center>
<img src="https://lamplighter.io/img/lamplighter.png" id="LL" /> <script src="js/index.js"></script>
</body>
</html>
HTML5 Logo Tracing - Script Codes CSS Codes
body { margin: 0px; background: #333;
}
#LL { display: none;
}
#canvas { width: 400px; height: 400px;
}
HTML5 Logo Tracing - Script Codes JS Codes
var points = [ [255,346], [288,251], [334,202], [372,246], [290,246], [245,155], [200,246], [155,202], [110,246], [66,201], [28,246], [110,246], [155,386]
];
var currentPoint = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { return setTimeout(callback, 1000/60); };
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var LL = document.getElementById('LL');
var animCounter = 0;
var render = function() { canvas.width = canvas.width; context.strokeStyle = '#CCC'; context.beginPath(); context.lineWidth = 24; context.moveTo(170,351); var lastX = 170; var lastY = 371; for (point in points) { if (point > currentPoint) { continue; } if (point == currentPoint) { lineCounter = (animCounter - point * 30); avgX = (points[point][0] * lineCounter + lastX * (30 - lineCounter)) / 30; avgY = (points[point][1] * lineCounter + lastY * (30 - lineCounter)) / 30; context.lineTo(avgX, avgY); } else { context.lineTo(points[point][0], points[point][1]); var lastX = points[point][0]; var lastY = points[point][1]; } } context.stroke(); currentPoint = Math.floor(animCounter / 30); if (animCounter >= points.length * 30) { context.beginPath(); context.arc(canvas.width/2, canvas.height/2, 192, Math.PI * .62 - Math.PI * 2 * (animCounter - points.length * 30) / 180, Math.PI * .62); context.stroke(); } if (animCounter >= points.length * 30 + 240) { animCounter = 0; } context.globalCompositeOperation = 'destination-in'; context.drawImage(LL,0,0); animCounter++; requestAnimationFrame(render);
}
render();
Developer | Dave DeHaan |
Username | davedehaan |
Uploaded | January 04, 2023 |
Rating | 3 |
Size | 2,301 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Winter | 2,613 Kb |
Randomly generated canvas clouds | 2,028 Kb |
A Pen by Dave DeHaan | 2,015 Kb |
Global Composite Operation Test | 1,992 Kb |
Auto-generating complementary colors | 1,988 Kb |
Yule Logs | 1,496 Kb |
Merry Christmas. | 3,030 Kb |
Spotlight Search 404 | 3,033 Kb |
Fun with Lines | 2,897 Kb |
Dynamic Hero Image | 2,435 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!