<div class='grid-container'>
<div class='center'>
<div class="hearts"></div>
</div>
<div class='mid-top'>
<div class="hearts reverse"></div>
<div class="hearts"></div>
<div class="hearts reverse"></div>
</div>
<div class='mid-bottom'>
<div class="hearts reverse"></div>
<div class="hearts"></div>
<div class="hearts reverse"></div>
</div>
<div class='bottomright'>
<div class="hearts"></div>
<div class="hearts reverse"></div>
<div class="hearts"></div>
</div>
<div class='bottomleft'>
<div class="hearts"></div>
<div class="hearts reverse"></div>
<div class="hearts"></div>
</div>
<div class='horizontal-mid-left'>
<div class="hearts reverse"></div>
<div class="hearts"></div>
<div class="hearts reverse"></div>
</div>
<div class='topleft'>
<div class="hearts"></div>
<div class="hearts reverse"></div>
<div class="hearts"></div>
</div>
<div class='topright'>
<div class="hearts"></div>
<div class="hearts reverse"></div>
<div class="hearts"></div>
</div>
<div class='horizontal-mid-right'>
<div class="hearts reverse"></div>
<div class="hearts"></div>
<div class="hearts reverse"></div>
</div>
</div>
<button id="toggleBorder">Toggle Border</button>
/*Downloaded from https://www.codeseek.co/the_bluescreen/heart-meditation-PamVEZ */
html,
body {
margin: 0;
height: 100%;
background: black;
padding-top: 10px;
}
.grid-container > div {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-start;
}
.grid-container {
display: grid;
// height: 100%;
width: 500px;
height: 500px;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "topleft mid-top topright" "horizontal-mid-left center horizontal-mid-right" "bottomleft mid-bottom bottomright";
&.bordered {
& > div {
border: 1px solid rgba(255, 255, 255, 0.1);
}
}
}
.center {
grid-area: center;
justify-content: center !important;
.hearts {
&:nth-of-type(1) {
align-self: center;
animation-delay: 0.2s;
}
}
}
.mid-top {
grid-area: mid-top;
.hearts {
&:nth-of-type(1) {
align-self: center;
animation-delay: 1.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: center;
animation-delay: 0.5s;
}
}
}
.mid-bottom {
grid-area: mid-bottom;
.hearts {
&:nth-of-type(1) {
align-self: center;
animation-delay: 0.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: center;
animation-delay: 1.5s;
}
}
}
.bottomright {
grid-area: bottomright;
.hearts {
&:nth-of-type(1) {
align-self: flex-start;
animation-delay: 0.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: flex-end;
animation-delay: 1.5s;
}
}
}
.bottomleft {
grid-area: bottomleft;
.hearts {
&:nth-of-type(1) {
align-self: flex-end;
animation-delay: 0.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: flex-start;
animation-delay: 1.5s;
}
}
}
.horizontal-mid-left {
grid-area: horizontal-mid-left;
flex-direction: row !important;
.hearts {
&:nth-of-type(1) {
align-self: center;
animation-delay: 1.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: center;
animation-delay: 0.5s;
}
}
}
.topleft {
grid-area: topleft;
.hearts {
&:nth-of-type(1) {
animation-delay: 1.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: flex-end;
animation-delay: 0.5s;
}
}
}
.topright {
grid-area: topright;
.hearts {
&:nth-of-type(1) {
align-self: flex-end;
animation-delay: 1.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: flex-start;
animation-delay: 0.5s;
}
}
}
.horizontal-mid-right {
grid-area: horizontal-mid-right;
flex-direction: row !important;
.hearts {
&:nth-of-type(1) {
align-self: center;
animation-delay: 0.5s;
}
&:nth-of-type(2) {
align-self: center;
animation-delay: 1s;
}
&:nth-of-type(3) {
align-self: center;
animation-delay: 1.5s;
}
}
}
.hearts {
width: 10px;
height: 10px;
//border-radius: 5px;
//background: white;
text-indent: -9999px;
animation-name: fade-in;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: alternate;
animation-iteration-count: infinite;
order: 0;
flex: 0 1 auto;
align-self: flex-start;
position: relative;
float: left;
&.reverse {
//background: black;
//border: 1px solid white;
&:before,
&:after {
background: black;
border: 1px solid white;
}
}
&:before,
&:after {
position: absolute;
content: "";
left: 5px;
top: 0;
width: 5px;
height: 8px;
background: white;
border-radius: 5px 5px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
1000% {
opacity: 1;
}
}
/*Downloaded from https://www.codeseek.co/the_bluescreen/heart-meditation-PamVEZ */
$(() => {
$('#toggleBorder').on('click', () => {
$('.grid-container').toggleClass('bordered');
})
});