.heart$size: 240px;
$s: 240; // $size
$base-color: #dd2525;
//-------------------------------------------
$cell: 50.1% / 8;
$color1: darken($base-color,20%);
$color2: darken($base-color,10%);
$color3: darken($base-color,5%);
$color4: lighten($base-color,5%);
$color5: lighten($base-color,10%);
$color6: lighten($base-color,20%);
$pattern1: 135deg;
$pattern2: -135deg;
$pattern3: -45deg;
$pattern4: 45deg;
// ------------------------------------------------
body { background-color: #222;}
.heart {
width: $size;
height: $size;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%,-50%);
will-change: transform;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: animation 3.2s cubic-bezier(1,0,0,1) 0.5s infinite both alternate;
background-image:
// 1*1
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 1*2
linear-gradient($pattern2, $color6 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 1*3
linear-gradient($pattern1, $color3 $cell, transparent $cell),
linear-gradient($pattern3, $color1 $cell, transparent $cell),
// 1*4
linear-gradient($pattern2, $color2 $cell, transparent $cell),
// 2*1
linear-gradient($pattern2, $color3 $cell, transparent $cell),
linear-gradient($pattern4, $color5 $cell, transparent $cell),
// 2*2
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 2*3
linear-gradient($pattern1, $color5 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 2*4
linear-gradient($pattern2, $color4 $cell, transparent $cell),
linear-gradient($pattern4, $color3 $cell, transparent $cell),
// 2*5
linear-gradient($pattern2, $color6 $cell, transparent $cell),
// 3*1
linear-gradient($pattern4, $color1 $cell, transparent $cell),
// 3*2
linear-gradient($pattern1, $color2 $cell, transparent $cell),
linear-gradient($pattern3, $color4 $cell, transparent $cell),
// 3*3
linear-gradient($pattern2, $color3 $cell, transparent $cell),
linear-gradient($pattern4, $color6 $cell, transparent $cell),
// 3*4
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 3*5
linear-gradient($pattern2, $color2 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 3*6
linear-gradient($pattern2, $color3 $cell, transparent $cell),
// 4*1
linear-gradient($pattern3, $color2 $cell, transparent $cell),
// 4*2
linear-gradient($pattern1, $color6 $cell, transparent $cell),
linear-gradient($pattern3, $color2 $cell, transparent $cell),
// 4*3
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color5 $cell, transparent $cell),
// 4*4
linear-gradient($pattern2, $color2 $cell, transparent $cell),
linear-gradient($pattern4, $color1 $cell, transparent $cell),
// 4*5
linear-gradient($pattern1, $color3 $cell, transparent $cell),
linear-gradient($pattern3, $color5 $cell, transparent $cell),
// 4*6
linear-gradient($pattern1, $color1 $cell, transparent $cell),
// 5*1
linear-gradient($pattern1, $color5 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*2
linear-gradient($pattern2, $color5 $cell, transparent $cell),
linear-gradient($pattern4, $color3 $cell, transparent $cell),
// 5*3
linear-gradient($pattern1, $color6 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*4
linear-gradient($pattern1, $color4 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*5
linear-gradient($pattern1, $color6 $cell, transparent $cell),
// 6*1
linear-gradient($pattern4, $color6 $cell, transparent $cell),
// 6*2
linear-gradient($pattern1, $color2 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 6*3
linear-gradient($pattern2, $color5 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 6*4
linear-gradient($pattern1, $color1 $cell, transparent $cell),
;
background-position:
// 1*1
random($s)+px random($s)+px,
// 1*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 1*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 1*4
random($s)+px random($s)+px,
// 2*1
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*5
random($s)+px random($s)+px,
// 3*1
random($s)+px random($s)+px,
// 3*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*5
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*6
random($s)+px random($s)+px,
// 4*1
random($s)+px random($s)+px,
// 4*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*5
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*6
random($s)+px random($s)+px,
// 5*1
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*5
random($s)+px random($s)+px,
// 6*1
random($s)+px random($s)+px,
// 6*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 6*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 6*4
random($s)+px random($s)+px,
;
}
}
//----------------------------------------
// Animation
//----------------------------------------
@keyframes animation {
50%,100% {
background-position:
// 1*1
$size*2/8 $size*2/8,
// 1*2
$size*2/8 $size*2/8, $size*1/8 $size*3/8,
// 1*3
$size*1/8 $size*3/8, $size*2/8 $size*4/8,
// 1*4
$size*2/8 $size*4/8,
// 2*1
$size*3/8 $size*1/8, $size*2/8 $size*2/8,
// 2*2
$size*2/8 $size*2/8, $size*3/8 $size*3/8,
// 2*3
$size*2/8 $size*3/8, $size*3/8 $size*4/8,
// 2*4
$size*3/8 $size*4/8, $size*2/8 $size*5/8,
// 2*5
$size*3/8 $size*5/8,
// 3*1
$size*3/8 $size*2/8,
// 3*2
$size*3/8 $size*2/8, $size*4/8 $size*3/8,
// 3*3
$size*4/8 $size*3/8, $size*3/8 $size*4/8,
// 3*4
$size*3/8 $size*4/8, $size*4/8 $size*5/8,
// 3*5
$size*4/8 $size*5/8, $size*3/8 $size*6/8,
// 3*6
$size*4/8 $size*6/8,
// 4*1
$size*5/8 $size*2/8,
// 4*2
$size*4/8 $size*2/8, $size*5/8 $size*3/8,
// 4*3
$size*4/8 $size*3/8, $size*5/8 $size*4/8,
// 4*4
$size*5/8 $size*4/8, $size*4/8 $size*5/8,
// 4*5
$size*4/8 $size*5/8, $size*5/8 $size*6/8,
// 4*6
$size*4/8 $size*6/8,
// 5*1
$size*5/8 $size*1/8, $size*6/8 $size*2/8,
// 5*2
$size*6/8 $size*2/8, $size*5/8 $size*3/8,
// 5*3
$size*5/8 $size*3/8, $size*6/8 $size*4/8,
// 5*4
$size*5/8 $size*4/8, $size*6/8 $size*5/8,
// 5*5
$size*5/8 $size*5/8,
// 6*1
$size*6/8 $size*2/8,
// 6*2
$size*6/8 $size*2/8, $size*7/8 $size*3/8,
// 6*3
$size*7/8 $size*3/8, $size*6/8 $size*4/8,
// 6*4
$size*6/8 $size*4/8,
;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.