Canvas Heart
How do I make an canvas heart?
What is a canvas heart? How do you make a canvas heart? This script and codes were developed by Ghost Rider on 23 July 2022, Saturday.
Canvas Heart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Heart</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="heart"></canvas> <script src="js/index.js"></script>
</body>
</html>
Canvas Heart - Script Codes CSS Codes
canvas { position: absolute; left:0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2);
}
Canvas Heart - Script Codes JS Codes
window.requestAnimationFrame = window.__requestAnimationFrame || window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (function () { return function (callback, element) { var lastTime = element.__lastTime; if (lastTime === undefined) { lastTime = 0; } var currTime = Date.now(); var timeToCall = Math.max(1, 33 - (currTime - lastTime)); window.setTimeout(callback, timeToCall); element.__lastTime = currTime + timeToCall; }; })();
window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
var loaded = false;
var init = function () { if (loaded) return; loaded = true; var mobile = window.isDevice; var koef = mobile ? 0.5 : 1; var canvas = document.getElementById('heart'); var ctx = canvas.getContext('2d'); var width = canvas.width = koef * innerWidth; var height = canvas.height = koef * innerHeight; var rand = Math.random; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, width, height); var heartPosition = function (rad) { //return [Math.sin(rad), Math.cos(rad)]; return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))]; }; var scaleAndTranslate = function (pos, sx, sy, dx, dy) { return [dx + pos[0] * sx, dy + pos[1] * sy]; }; window.addEventListener('resize', function () { width = canvas.width = koef * innerWidth; height = canvas.height = koef * innerHeight; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, width, height); }); var traceCount = mobile ? 20 : 50; var pointsOrigin = []; var i; var dr = mobile ? 0.3 : 0.1; for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0)); var heartPointsCount = pointsOrigin.length; var targetPoints = []; var pulse = function (kx, ky) { for (i = 0; i < pointsOrigin.length; i++) { targetPoints[i] = []; targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2; targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2; } }; var e = []; for (i = 0; i < heartPointsCount; i++) { var x = rand() * width; var y = rand() * height; e[i] = { vx: 0, vy: 0, R: 2, speed: rand() + 5, q: ~~(rand() * heartPointsCount), D: 2 * (i % 2) - 1, force: 0.2 * rand() + 0.7, f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)", trace: [] }; for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y}; } var config = { traceK: 0.4, timeDelta: 0.01 }; var time = 0; var loop = function () { var n = -Math.cos(time); pulse((1 + n) * .5, (1 + n) * .5); time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta; ctx.fillStyle = "rgba(0,0,0,.1)"; ctx.fillRect(0, 0, width, height); for (i = e.length; i--;) { var u = e[i]; var q = targetPoints[u.q]; var dx = u.trace[0].x - q[0]; var dy = u.trace[0].y - q[1]; var length = Math.sqrt(dx * dx + dy * dy); if (10 > length) { if (0.95 < rand()) { u.q = ~~(rand() * heartPointsCount); } else { if (0.99 < rand()) { u.D *= -1; } u.q += u.D; u.q %= heartPointsCount; if (0 > u.q) { u.q += heartPointsCount; } } } u.vx += -dx / length * u.speed; u.vy += -dy / length * u.speed; u.trace[0].x += u.vx; u.trace[0].y += u.vy; u.vx *= u.force; u.vy *= u.force; for (k = 0; k < u.trace.length - 1;) { var T = u.trace[k]; var N = u.trace[++k]; N.x -= config.traceK * (N.x - T.x); N.y -= config.traceK * (N.y - T.y); } ctx.fillStyle = u.f; for (k = 0; k < u.trace.length; k++) { ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1); } } //ctx.fillStyle = "rgba(255,255,255,1)"; //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2); window.requestAnimationFrame(loop, canvas); }; loop();
};
var s = document.readyState;
if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
else document.addEventListener('DOMContentLoaded', init, false);
Developer | Ghost Rider |
Username | GhostRider |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 3,161 Kb |
Views | 38,456 |
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 |
Laserz... | 1,848 Kb |
Under construction | 1,642 Kb |
A Pen by Ghost Rider | 57,648 Kb |
JQuery parallax | 2,230 Kb |
Sudoko Solver | 29,760 Kb |
Iphone game | 3,423 Kb |
Confetti en jQuery | 4,287 Kb |
Google MAP | 10,594 Kb |
CSS and SVG Pyramid | 3,026 Kb |
CSS Brainbow Menu | 2,964 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 |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
404 Error Page | WebSonick | 3,203 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!