CSS Grid Heartbeat

In this example below you will see how to do a CSS Grid Heartbeat with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by onion2k, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright onion2k ©
  • HTML
  • CSS
  • JavaScript
    %header
  Heart
%main
  - 36.times do
    %div
%footer
  Beat

/*Downloaded from https://www.codeseek.co/onion2k/css-grid-heartbeat-bMrWWx */
    @import url('https://fonts.googleapis.com/css?family=Monoton');

/**
*
*   SCSS functions to calculate the initial start location
*
*/

@function distR($r,$i){
  @return (-2.5 + (($i - 1) % 6));
}

@function distC($r,$i){
  @return (-2.5 + floor(($i - 1) / 6));
}

@for $i from 1 through 36 {
  div:nth-child(#{$i}) {
    transform: translateX(#{distR(6,$i)}vmin) translateY(#{distC(6,$i)}vmin);
  }
}

/**
*
*   Set up some CSS vars that are used for timing things
*
*/

* {
  --speed: 600ms;
  --delay: 75ms;
}

/**
*
*   Animation settings
*
*/

div {
  animation-name: pulse;
  animation-duration: var(--speed);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes pulse {
  from {}
  to {
    transform: translateX(0) translateY(0);
  }
}

@for $i from 1 through 36 {
  div:nth-child(#{$i}) {
    background-color: hsla(16, 90, ($i / 36) * 32 + 16, 1);
    animation-delay: calc(5 * var(--delay));
  }
}

/**
*
*   It's just boilerplate from here on down.
*
*/

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  display: grid;
  align-items: center;
  justify-items: center;
}

header, footer {
  color: #a00;
  font-family: 'Monoton';
  font-size: 8.0rem;
  transform: rotate(-5deg);
}

footer {
  font-size: 10.0rem;   
}

main {
  display: grid;
  grid-auto-rows: 6vmin;
  grid-template-columns: repeat(6, 6vmin);
  grid-gap: 3px;
  transform: rotate(-50deg);
}

div {
  border-radius: 5px;
  padding: 15px;
  border: 2px solid #444;
  transition: background-color 0.5s linear, transform 0.5s linear;
}

div:hover {
  background-color: #ff0000;
}



/*Downloaded from https://www.codeseek.co/onion2k/css-grid-heartbeat-bMrWWx */
    

Comments