<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>

// @import compass;

$bubble-d: 4.5rem; // bubble diameter
$bubble-r: .5*$bubble-d; // bubble-radius
$particle-d: .375rem;
$particle-r: .5*$particle-d;

@mixin particles($k) {
  $shadow-list: ();
  $n-groups: 7;
  $group-base-angle: 360deg/$n-groups;
  $group-distr-r: (1 + $k*.25)*$bubble-r;
  $n-particles: 2;
  $particle-base-angle: 360deg/$n-particles;
  $particle-off-angle: 60deg; // offset angle from radius
  $spread-r: -$k*1.1*$particle-r;
  
  @for $i from 0 to $n-groups {
    $group-curr-angle: $i*$group-base-angle - 90deg;
    $xg: $group-distr-r*cos($group-curr-angle);
    $yg: $group-distr-r*sin($group-curr-angle);
    
    @for $j from 0 to $n-particles {
      $particle-curr-angle: $group-curr-angle + 
        $particle-off-angle + $j*$particle-base-angle;
      $xs: $xg + $particle-d*cos($particle-curr-angle);
      $ys: $yg + $particle-d*sin($particle-curr-angle);
      
      $shadow-list: $shadow-list, $xs $ys 0 $spread-r 
        hsl(($i + $j)*$group-base-angle, 100%, 75%);
    }
  }
  
  box-shadow: $shadow-list;
}

@mixin bubble($ext) {
  transform: scale(1);
  border-color: #cc8ef5;
  border-width: $ext;
}

body {
  display: flex;
  justify-content: center;
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, 
    #121721, #000);
  font: 1em verdana, sans-serif;
}

[id='toggle-heart'] {
  position: absolute;
  left: -100vw;
  
  &:checked + label {
    color: #e2264d;
    will-change: font-size;
    animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);
    
    &:before, &:after {
      animation: inherit;
      animation-timing-function: ease-out;
    }
    
    &:before {
      will-change: transform, border-width, border-color;
      animation-name: bubble;
    }
    
    &:after {
      will-change: opacity, box-shadow;
      animation-name: particles;
    }
  }
}

[for='toggle-heart'] {
  align-self: center;
  position: relative;
  color: #aab8c2;
  font-size: 2em;
  user-select: none;
  cursor: pointer;
  
  &:before, &:after {
    position: absolute;
    z-index: -1;
    top: 50%; left: 50%;
    border-radius: 50%;
    content: '';
  }
  
  &:before {
    box-sizing: border-box;
    margin: -$bubble-r;
    border: solid $bubble-r #e2264d;
    width: $bubble-d; height: $bubble-d;
    transform: scale(0);
  }
  
  &:after {
    margin: -$particle-r;
    width: $particle-d; height: $particle-d;
    @include particles(1);
  }
}

@keyframes heart {
  0%, 17.5% { font-size: 0; }
}

@keyframes bubble {
  15% { @include bubble($bubble-r); }
  30%, 100% { @include bubble(0); }
}

@keyframes particles {
  0%, 20% { opacity: 0; }
  25% {
    opacity: 1;
    @include particles(0);
  }
}