Smoked heart

-


Before visiting code visit the video

YouTube link - Click me

So enjoy your code

<!DOCTYPE html>
<html>

<head>
  <title>HEART is LOADING...</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      overflow: none;
      width: 100%;
      height: 100%;
    }

    body {
      background: url('https://i.imgur.com/UMnw0tW.jpg');
      font-family: 'Ubuntu', sans-serif;
      background-position: center center;
      background-size: cover;
      color: #121212;
    }

    .loader {
      position: absolute;
      top: 50%;
      margin: -240px;
      left: 50%;
      width: 480px;
      height: 480px;
    }

    .loader h1 {
      position: absolute;
      top: 0px;
      left: 0px;
      text-align: center;
      width: 100%;
      top: 0px;
      line-height: 420px;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.24);
      font-weight: 100;
    }
  </style>
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>
  <div class="loader">
    <canvas width="480px" height="480px" id="loader"></canvas>
    <h1>heart</h1>
  </div>
  <script>
    Loadr = new(function Loadr(id) {
      const max_size = 24;
      const max_particles = 1500;
      const min_vel = 20;
      const max_generation_per_frame = 10;
      var canvas = document.getElementById(id);
      var ctx = canvas.getContext('2d');
      var height = canvas.height;
      var center_y = height / 2;
      var width = canvas.width;
      var center_x = width / 2;
      var animate = true;
      var particles = [];
      var last = Date.now(),
        now = 0;
      var died = 0,
        len = 0,
        dt;

      function isInsideHeart(x, y) {
        x = ((x - center_x) / (center_x)) * 3;
        y = ((y - center_y) / (center_y)) * -3;
        var x2 = x * x;
        var y2 = y * y;
        return (Math.pow((x2 + y2 - 1), 3) - (x2 * (y2 * y)) < 0);
      }

      function random(size, freq) {
        var val = 0;
        var iter = freq;
        do {
          size /= iter;
          iter += freq;
          val += size * Math.random();
        } while (size >= 1);
        return val;
      }

      function Particle() {
        var x = center_x;
        var y = center_y;
        var size = ~~random(max_size, 2.4);
        var x_vel = ((max_size + min_vel) - size) / 2 - (Math.random() * ((max_size + min_vel) - size));
        var y_vel = ((max_size + min_vel) - size) / 2 - (Math.random() * ((max_size + min_vel) - size));
        var nx = x;
        var ny = y;
        var r, g, b, a = 0.05 * size;
        this.draw = function() {
          r = ~~(255 * (x / width));
          g = ~~(255 * (1 - (y / height)));
          b = ~~(255 - r);
          ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
          ctx.beginPath();
          ctx.arc(x, y, size, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
        }
        this.move = function(dt) {
          nx += x_vel * dt;
          ny += y_vel * dt;
          if (!isInsideHeart(nx, ny)) {
            if (!isInsideHeart(nx, y)) {
              x_vel *= -1;
              return;
            }
            if (!isInsideHeart(x, ny)) {
              y_vel *= -1;
              return;
            }
            x_vel = -1 * y_vel;
            y_vel = -1 * x_vel;
            return;
          }
          x = nx;
          y = ny;
        }
      }

      function movementTick() {
        var len = particles.length;
        var dead = max_particles - len;
        for (var i = 0; i < dead && i < max_generation_per_frame; i++) {
          particles.push(new Particle());
        }
        now = Date.now();
        dt = last - now;
        dt /= 1000;
        last = now;
        particles.forEach(function(p) {
          p.move(dt);
        });
      }

      function tick() {
        ctx.clearRect(0, 0, width, height);
        particles.forEach(function(p) {
          p.draw();
        });
        requestAnimationFrame(tick);
      }
      this.start = function() {}
      this.done = function() {}
      setInterval(movementTick, 16);
      tick();
    })("loader");
  </script>
</body>

</html



Thanks for visiting
@dhawneetg

Comments

Post a Comment

Popular posts from this blog

Birthday card in html css js

-
Image
Before viewing the code visit YouTube video for experience the environment  YouTube link  - Click here So here is the code  Html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=Edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>HTML</title>      <!-- HTML -->      <!-- Custom Styles -->   <link rel="stylesheet" href="style.css"> </head> <body>  <div class="birthdayCard"> <div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3> <div class="balloons">   <div class="balloonOne"></div>   <div class="balloonTwo"></div>   <div class="balloonThree"></div>   <div class="balloonFou...
Read more

Create Animated Tooltip Popups in HTML/CSS | No JavaScript Needed!

-
Image
  This tutorial includes how to make tooltip popup in css without javascript.  Youtube link - Youtube Enjoy the code <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > pop up </ title >     < style >     @import url ( 'https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap' );         * {         margin : 0 ;         padding : 0 ;         box-sizing : border-box ;         font-family : 'Poppins' , sans-serif ;     }     body {         display : flex ;         min-height : 100vh ;         align-items : center ; /****/       ...
Read more

Built a 3D Morphing Engine with 8,000 Particles! ✨ (Three.js)

-
Image
Youtube link  Click me In this blog i have share the source code of my youtube video <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Morphing Particle Animation </ title >     < style >         * {             margin : 0;             padding : 0 ;             box-sizing : border-box ;         }         body {             overflow : hidden ;             background : #000 ;             font-family : Arial , sans-serif ;         }         #canvas-container {          ...
Read more

Create an Instagram Profile Page Using HTML and CSS | UI Clone Tutorial

-
Image
This tutorial includes how to instagram clone in html , css without javascript.  Youtube link - Click here Enjoy the code  index.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Instagram Profile Clone </ title >     < link rel = "stylesheet" href = "style.css" >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" > </ head > < body >     < nav class = "navbar" >         < div class = "nav-left" >             < img src = "image/Instagram_logo.svg" alt = "Instagram Logo" class = "insta-logo" > <!-- Changed -->         </ div >       ...
Read more

JavaScript Voronoi Circles effect |HTML JS| #coding

-
Image
Hey there, I hope you have enjoy the imagination and come here to test, i appreciate that , So here code and I want you install JavaScript cdn module named as D3.min.js version 5.5.0  Html code <!DOCTYPE html> <html> <head>   <meta charset="utf-8">      <script src="cdn_modules/d3@5.5.0/d3.min.js"></script> </head> <body>   <canvas width="960" height="500"></canvas>   <script src="script.js"></script> </body> </html> JavaScript code const canvas = document.querySelector("canvas"),   width = canvas.width,   height = canvas.height,   context = canvas.getContext("2d"),   voronoi = d3.voronoi().extent([[0.5, 0.5], [width - 0.5, height - 0.5]]); const n = 100,   particles = Array.from(new Array(n), getInitData); let cells,   activeCell; d3.select(canvas)   .call(d3.drag()     .on("start", dragstarted)     .on...
Read more

Digital Clock with animation |HTML|CSS|JS

-
Image
Welcome to crospytech . In this post you will get source code of "Digital clock " made using HTML,JS,CSS.   The code firstly had html code then css and then javascript. HTML  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Clock</title>   <link rel="stylesheet" href="style.css"> </head> <body bgcolor="black">   <div class="container"> <div class="clock">   <div class="digit hours">     <div class="segment"></div>     <div class="segment"></div>     <div class="segment"></div>     <div class="segment"></div>     <div class=...
Read more

Coding a 'Smart' Particle System (Text to Dots Tutorial)

-
Image
Youtube video  In this blog i have share the source code the video . Html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < canvas id = "canvas1" ></ canvas > </ body > < script src = "script.js" ></ script > </ html > Css body { margin : 0 ; background : #000 ; overflow : hidden ; font-family : sans-serif ; } canvas { display : block ; } Javascript const canvas = document . getElementById ( 'canvas1' ); const ctx = canvas . getContext ( '2d' ); canvas . width = window . innerWidth ; canvas . height = window . innerHeight ; let particles = []; const mouse ...
Read more

Upcoming Apple Products Guide: Everything We Expect to See in 2021 and Beyond..

-
Image
  Upcoming Apple Products Guide: Everything We Expect to See in 2021 and Beyond.. by Dhawneet Gehlot 27,MAY,2021.. The  MacRumors  guide to upcoming products is designed to provide an overview of everything that we're expecting to see from Apple, both in the near and more distant future. Dates listed are not always concrete, but are based on the most recent rumors and information that we have. We're updating the guide on a regular basis, so it will be the go-to place to see every Apple product that's on the horizon at a glance. For more detail on the rumors we've heard about each upcoming item, make sure to click on the links to visit our roundups. First Half of 2021.. Apple held an event in April 2021 and introduced AirTags, new iMac models, an updated Apple TV 4K, and refreshed versions of the 11 and 12.9-inch iPad Pro. It's not clear if we may see additional product launches in May, but it's likely the next opportunity for new devices is in June at WWDC. WWDC...
Read more