*, :before, :after {
  box-sizing: border-box;  
}

$border: 15px;
$size: 250px;
$color: darken(#3A7BD5, 15%);

body{
  background: linear-gradient(to left, #00D2FF , #3A7BD5);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.heart {
  width: $size;
  height: $size;
  position: relative;
  transform: rotate(-45deg);
  border: $border solid $color;
  border-radius: $size/50;
  border-top-color: transparent;
  border-right-color: transparent;
  &:before, &:after {
    content: '';
    width: $size;
    height: $size;
    border-radius: 50%;
    position: absolute;
    border: $border solid $color;
    border-bottom-color: transparent;
    border-right-color: transparent;
  }
  &:before {
    top: -$size/2;
    left: -$border;
    transform: rotate(45deg);
  }
  &:after {
    top: -$border;
    left: $size/2 - $border*2;
    transform: rotate(135deg);
  }
}