.svg-container {
  height: 124px;
  position: relative;
  width: 124px;
}

.circle {
  height: 124px;
  width: 124px;
}
.circle .background {
  fill: transparent;
  stroke: #fd0;
  transition: all 200ms ease;
}
.circle .foreground {
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  stroke: #333;
  transform-origin: 50% 50%;
  transform: rotate(-270deg);
  transition: all 800ms ease;
}
.circle .line {
  stroke-width: 2;
  stroke: #fd0;
  transform-origin: 50% 50%;
  transition: all 500ms ease;
}
.circle .line2 {
  transform: rotate(-90deg);
}
.circle:hover {
  cursor: pointer;
}
.circle:hover .background {
  stroke: transparent;
}
.circle:hover .foreground {
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
}
.circle:hover .line {
  stroke: #333;
}
.circle:hover .line {
  transform: rotate(180deg);
}
.circle:hover .line2 {
  transform: rotate(0);
}
.svg-container p {
    font-size: 10px;
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 200;
    z-index: -3;
    color: #333;
}