HTML5 Logo Tracing

Developer
Dave DeHaan
Size
2,301 Kb
Views
4,048
  1. HTML5 Logo Tracing Previews
  2. HTML5 Logo Tracing HTML Codes
  3. HTML5 Logo Tracing CSS Codes
  4. HTML5 Logo Tracing JS Codes

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 Previews
IQ Test

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();
HTML5 Logo Tracing - Script Codes
HTML5 Logo Tracing - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 3
Size 2,301 Kb
Views 4,048
Do you need developer help for HTML5 Logo Tracing?

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!

Dave DeHaan (davedehaan) Script Codes
Name
Winter
Randomly generated canvas clouds
A Pen by Dave DeHaan
Global Composite Operation Test
Auto-generating complementary colors
Yule Logs
Merry Christmas.
Spotlight Search 404
Fun with Lines
Dynamic Hero Image
Create amazing video scripts with AI!

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!