body
  .wrapper
    .circle.pulse
    .circle
      svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100")
        polygon(points="40,30 65,50 40,70")

$primary: #33cc33;

body {
  background: #e9e9e9;
  padding: 50px;
}

.wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;

  .circle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: $primary;
    margin: auto;
    transform: scale(1, 1);

    &.pulse {
      animation-timing-function: ease;
      animation: pulse 2s infinite;
      background-color: lighten($primary, 25%);
    }
  }

  svg {
    fill: darken($primary, 12%);
    stroke: darken($primary, 12%);
    stroke-linejoin: round;
    stroke-width: 5;
    transition: all 0.3s;

    &:hover {
      cursor: pointer;
      fill: darken($primary, 17%);
      stroke: darken($primary, 17%);
      transform: scale(1.2, 1.2);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}