❄️
How do I make an ❄️?
Since this is what we do in december, and i like emojisthe math is heavily based on @OfficialAntarctica's pen (http://codepen.io/OfficialAntarctica/pen/gPmNwv), b/c its already really good.. What is a ❄️? How do you make a ❄️? This script and codes were developed by Halvves on 22 November 2022, Tuesday.
❄️ - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>❄️</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="❄️"></canvas> <script src="js/index.js"></script>
</body>
</html>
❄️ - Script Codes CSS Codes
@charset "UTF-8";
body { height: 100vh; width: 100vw; background: #ebf9fe; background: -webkit-linear-gradient(top left, #ebf9fe 5%, #87afe5); background: linear-gradient(to bottom right, #ebf9fe 5%, #87afe5);
}
body #❄️ { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;
}
❄️ - Script Codes JS Codes
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
})();
function youknownothingjonsnow(){ var canvas = document.getElementById("❄️"); var ctx = canvas.getContext("2d"); var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; canvas.width = WIDTH; canvas.height = HEIGHT; var quantity = 80; var particles = []; for (var i = 0; i < quantity; i++) { particles.push({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, r: Math.random() * 4 + 1, d: Math.random() * quantity }) } function draw() { ctx.clearRect(0, 0, WIDTH, HEIGHT); ctx.fillStyle = "rgba(255, 255, 255, 1)"; for (var i = 0; i < quantity; i++) { var p = particles[i]; ctx.font= p.r * 7 + "px sans-serif"; ctx.fillText("❄️",p.x, p.y); } update(); } var angle = 0.005; function update() { angle += 0.005; for (var i = 0; i < quantity; i++) { var p = particles[i]; p.y += Math.cos(angle + p.d) + p.r / 2; p.x += Math.sin(angle) / 3; if (p.x > WIDTH + 10 || p.x < -30 || p.y > HEIGHT + 30) { if (i % 9 > 0) { particles[i] = { x: Math.random() * WIDTH, y: -30, r: p.r, d: p.d }; } else { if (Math.sin(angle) > 0) { particles[i] = { x: -30, y: Math.random() * HEIGHT, r: p.r, d: p.d }; } else { particles[i] = { x: WIDTH + 10, y: Math.random() * HEIGHT, r: p.r, d: p.d }; } } } } } function resizeCanvas() { WIDTH = canvas.width = window.innerWidth; HEIGHT = canvas.height = window.innerHeight; } (function runtime() { requestAnimFrame(runtime); draw(); })(); window.addEventListener('resize', resizeCanvas, false);
}
document.addEventListener("DOMContentLoaded", youknownothingjonsnow, false);
Developer | Halvves |
Username | halvves |
Uploaded | November 22, 2022 |
Rating | 4.5 |
Size | 2,828 Kb |
Views | 12,144 |
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 |
Flat Realtime Clock | 3,280 Kb |
Animated Low Poly Wolf | 10,106 Kb |
CSS Blend Mode Circles | 2,218 Kb |
Chemical Burns | 2,673 Kb |
Blend Mode Circles and Sass Loops | 3,768 Kb |
My codepeniversary - trigonometric functions are fun | 3,010 Kb |
Feelings | 51,083 Kb |
Single Div Nintendo Switch Logo | 2,515 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 |
Countdown with Rings | Ewganoel | 2,490 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Blog | Rottingroom | 1,430 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
A Pen by Anoop | Anoopjohn | 330,760 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!