body {
    padding: 100px;
    background: #222;
    background-size: cover;
    background-position: 0 -100px;
    background-repeat: no-repeat;
    display: flex;
}

// $px is the size of a pixel.
$px: 2px;
// $outer is the colour of the edge.
$outer: white;
// $inner is the colour of the heart.
$inner: #ee0022;

$heartContainer:
  // right side of heart;
    (1 * $px) (-1 * $px) 0 $outer, (2 * $px) (-2 * $px) 0 $outer,
    (3 * $px) (-3 * $px) 0 $outer, (4 * $px) (-4 * $px) 0 $outer,
    (5 * $px) (-5 * $px) 0 $outer, (6 * $px) (-6 * $px) 0 $outer,
    (6 * $px) (-7 * $px) 0 $outer, (6 * $px) (-8 * $px) 0 $outer,
    (6 * $px) (-9 * $px) 0 $outer, (5 * $px) (-10 * $px) 0 $outer,
    (4 * $px) (-11 * $px) 0 $outer, (3 * $px) (-11 * $px) 0 $outer,
    (2 * $px) (-11 * $px) 0 $outer, (1 * $px) (-10 * $px) 0 $outer,
    (0 * $px) (-9 * $px) 0 $outer,
    // left side of heart;
    (-1 * $px) (-1 * $px) 0 $outer,
    (-2 * $px) (-2 * $px) 0 $outer, (-3 * $px) (-3 * $px) 0 $outer,
    (-4 * $px) (-4 * $px) 0 $outer, (-5 * $px) (-5 * $px) 0 $outer,
    (-6 * $px) (-6 * $px) 0 $outer, (-6 * $px) (-7 * $px) 0 $outer,
    (-6 * $px) (-8 * $px) 0 $outer, (-6 * $px) (-9 * $px) 0 $outer,
    (-5 * $px) (-10 * $px) 0 $outer, (-4 * $px) (-11 * $px) 0 $outer,
    (-3 * $px) (-11 * $px) 0 $outer, (-2 * $px) (-11 * $px) 0 $outer,
    (-1 * $px) (-10 * $px) 0 $outer;

$topRight: (0 * $px) (-7 * $px) 0 $inner, (1 * $px) (-9 * $px) 0 $inner,
    (1 * $px) (-8 * $px) 0 $inner, (1 * $px) (-7 * $px) 0 $inner,
    (1 * $px) (-6 * $px) 0 $inner, (2 * $px) (-10 * $px) 0 $inner,
    (2 * $px) (-9 * $px) 0 $inner, (2 * $px) (-8 * $px) 0 $inner,
    (2 * $px) (-7 * $px) 0 $inner, (3 * $px) (-10 * $px) 0 $inner,
    (3 * $px) (-9 * $px) 0 $inner, (3 * $px) (-8 * $px) 0 $inner,
    (3 * $px) (-7 * $px) 0 $inner, (3 * $px) (-6 * $px) 0 $inner,
    (4 * $px) (-10 * $px) 0 $inner, (4 * $px) (-9 * $px) 0 $inner,
    (4 * $px) (-8 * $px) 0 $inner, (4 * $px) (-7 * $px) 0 $inner,
    (5 * $px) (-9 * $px) 0 $inner, (5 * $px) (-8 * $px) 0 $inner,
    (5 * $px) (-7 * $px) 0 $inner, (5 * $px) (-6 * $px) 0 $inner;

$bottomRight: (0 * $px) (-1 * $px) 0 $inner, (0 * $px) (-3 * $px) 0 $inner,
    (0 * $px) (-5 * $px) 0 $inner, (1 * $px) (-2 * $px) 0 $inner,
    (1 * $px) (-3 * $px) 0 $inner, (1 * $px) (-4 * $px) 0 $inner,
    (1 * $px) (-5 * $px) 0 $inner, (2 * $px) (-3 * $px) 0 $inner,
    (2 * $px) (-4 * $px) 0 $inner, (2 * $px) (-5 * $px) 0 $inner,
    (2 * $px) (-6 * $px) 0 $inner, (3 * $px) (-4 * $px) 0 $inner,
    (3 * $px) (-5 * $px) 0 $inner, (4 * $px) (-5 * $px) 0 $inner,
    (4 * $px) (-6 * $px) 0 $inner;

$bottomLeft: (0 * $px) (-2 * $px) 0 $inner, (0 * $px) (-4 * $px) 0 $inner,
    (0 * $px) (-6 * $px) 0 $inner, (-1 * $px) (-2 * $px) 0 $inner,
    (-1 * $px) (-3 * $px) 0 $inner, (-1 * $px) (-4 * $px) 0 $inner,
    (-1 * $px) (-5 * $px) 0 $inner, (-2 * $px) (-3 * $px) 0 $inner,
    (-2 * $px) (-4 * $px) 0 $inner, (-2 * $px) (-5 * $px) 0 $inner,
    (-2 * $px) (-6 * $px) 0 $inner, (-3 * $px) (-4 * $px) 0 $inner,
    (-3 * $px) (-5 * $px) 0 $inner, (-4 * $px) (-5 * $px) 0 $inner,
    (-4 * $px) (-6 * $px) 0 $inner;

$topLeft: (0 * $px) (-8 * $px) 0 $inner, (-1 * $px) (-6 * $px) 0 $inner,
    (-1 * $px) (-7 * $px) 0 lighten($inner, 5%),
    (-1 * $px) (-8 * $px) 0 lighten($inner, 15%), (-1 * $px) (-9 * $px) 0 $inner,
    (-2 * $px) (-7 * $px) 0 lighten($inner, 15%),
    (-2 * $px) (-8 * $px) 0 lighten($inner, 20%),
    (-2 * $px) (-9 * $px) 0 lighten($inner, 15%),
    (-2 * $px) (-10 * $px) 0 lighten($inner, 15%),
    (-3 * $px) (-6 * $px) 0 lighten($inner, 5%),
    (-3 * $px) (-7 * $px) 0 lighten($inner, 15%),
    (-3 * $px) (-8 * $px) 0 lighten($inner, 25%),
    (-3 * $px) (-9 * $px) 0 lighten($inner, 20%),
    (-3 * $px) (-10 * $px) 0 lighten($inner, 5%),
    (-4 * $px) (-7 * $px) 0 lighten($inner, 15%),
    (-4 * $px) (-8 * $px) 0 lighten($inner, 15%),
    (-4 * $px) (-9 * $px) 0 lighten($inner, 15%),
    (-4 * $px) (-10 * $px) 0 lighten($inner, 5%),
    (-5 * $px) (-6 * $px) 0 lighten($inner, 15%),
    (-5 * $px) (-7 * $px) 0 lighten($inner, 5%),
    (-5 * $px) (-8 * $px) 0 lighten($inner, 5%),
    (-5 * $px) (-9 * $px) 0 lighten($inner, 5%);

.heart {
    width: $px;
    height: $px;
    position: absolute;
    background: $outer;

    box-shadow: $heartContainer, $topRight, $bottomRight, $bottomLeft, $topLeft;

    &.one {
        animation: heartFill3 4s steps(1) infinite 1.5s;
    }
    &.two {
        animation: heartFill2 4s steps(1) infinite 1.5s;
    }
    &.three {
        animation: heartFill1 4s steps(1) infinite 1.5s;
    }
}

@keyframes heartFill1 {
    0% {
        box-shadow: $heartContainer, $topRight, $bottomRight, $bottomLeft,
            $topLeft;
    }
    2% {
        box-shadow: $heartContainer, $bottomRight, $bottomLeft, $topLeft;
    }
    4% {
        box-shadow: $heartContainer, $bottomLeft, $topLeft;
    }
    6% {
        box-shadow: $heartContainer, $topLeft;
    }
    8% {
        box-shadow: $heartContainer;
    }

    66% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft;
    }
    70% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft, $topRight,
            $bottomRight;
    }
}

@keyframes heartFill2 {
    10% {
        box-shadow: $heartContainer, $topRight, $bottomRight, $bottomLeft,
            $topLeft;
    }
    12% {
        box-shadow: $heartContainer, $bottomRight, $bottomLeft, $topLeft;
    }
    14% {
        box-shadow: $heartContainer, $bottomLeft, $topLeft;
    }
    16% {
        box-shadow: $heartContainer, $topLeft;
    }
    18% {
        box-shadow: $heartContainer;
    }

    58% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft;
    }
    62% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft, $topRight,
            $bottomRight;
    }
}

@keyframes heartFill3 {
    20% {
        box-shadow: $heartContainer, $topRight, $bottomRight, $bottomLeft,
            $topLeft;
    }
    22% {
        box-shadow: $heartContainer, $bottomRight, $bottomLeft, $topLeft;
    }
    24% {
        box-shadow: $heartContainer, $bottomLeft, $topLeft;
    }
    26% {
        box-shadow: $heartContainer, $topLeft;
    }
    28% {
        box-shadow: $heartContainer;
    }

    50% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft;
    }
    54% {
        box-shadow: $heartContainer, $topLeft, $bottomLeft, $topRight,
            $bottomRight;
    }
}

.heartContainer {
    $w: $px * 240;
    $h: $px * 60;

    background: rgba(8, 14, 32, 0.8);
    position: absolute;
    box-shadow: 0 0 ($px * 8) ($px * 6) rgba(8, 14, 32, 0.8);

    border-radius: $px * 8;
    width: $w;
    height: $h;
    padding: 30px;

    left: 50%;
    margin-left: -($w/2);
    top: 50%;
    margin-top: -($h/2);

    .heart {
        bottom: 50%;
        left: 50%;
        margin-bottom: -($px * 18);
    }
    .one {
        margin-left: -($px * 16);
    }
    .two {
        margin-left: -($px/2);
    }
    .three {
        margin-left: ($px * 15);
    }

    h2 {
        font-family: "Chiaro";
        font-weight: 100;
        font-size: $px * 10;
        color: white;

        text-shadow: $px $px $px black;

        width: $px * 200;
        position: absolute;
        left: 50%;
        bottom: 50%;
        margin-left: -($px * 100);
        text-align: center;

        em {
            font-style: normal;
            color: $inner;
        }
    }
}

@font-face {
    font-family: "Chiaro";
    src: url("https://assets.codepen.io/13471/chiaro.woff");

    font-weight: 100;
}