css javascript 円グラフ 100%超えたときの挙動を変えたい

前提・実現したいこと

javascriptとcssを使って円グラフを作っているのですが、
100%超えたときの挙動が思うようにいかず困っています。

イメージは、画像のような感じです。
100%を超えた場合、その超えた分のみ色を濃くして残りの色を100%以下で色付けしている色にしたいです。
200%を超えたときは100%を超えたときと同じ挙動にしたいです。

20%

120%

50%を超えた時点でjavascriptで分岐しているみたいなのですが、仕組みが分からず自力では解決できませんでした。
書き方が分かる方、教えていただきたいです。よろしくお願いします。

該当のソースコード

HTML
1<div class="progress-pie-chart" data-percent="43">
2  <div class="ppc-progress">
3    <div class="ppc-progress-fill"></div>
4  </div>
5  <div class="ppc-percents">
6    <div class="pcc-percents-wrapper">
7      <span>%</span>
8    </div>
9  </div>
10</div>

css
1@mixin circle($size) {
2  content: "";
3  position: absolute;
4  border-radius: 50%;
5  left: calc(50% - #{$size/2});
6  top: calc(50% - #{$size/2});
7  width: $size;
8  height: $size;
9}
10
11$size: 200px;
12.progress-pie-chart {
13  width: $size;
14  height: $size;
15  border-radius: 50%;
16  background-color: #E5E5E5;
17  position: relative;
18  &.gt-50 {
19    background-color: #81CE97;
20  }
21}
22.ppc-progress {
23  @include circle($size);
24  clip: rect(0, $size, $size, #{$size/2});
25  .ppc-progress-fill {
26    @include circle($size);
27    clip: rect(0, #{$size/2}, $size, 0);
28    background: #81CE97;
29    transform: rotate(60deg);
30  }
31  .gt-50 & {
32    clip: rect(0, #{$size/2}, $size, 0);
33    .ppc-progress-fill {
34      clip: rect(0, $size, $size, #{$size/2});
35      background: #E5E5E5;
36    }
37  }
38}
39.ppc-percents {
40  @include circle(#{$size/1.15});
41  background: #fff;
42  text-align: center;
43  display: table;
44  span {
45    display: block;
46    font-size: 2.6em;
47    font-weight: bold;
48    color: #81CE97;
49  }
50}
51.pcc-percents-wrapper {
52  display: table-cell;
53  vertical-align: middle;
54}
55
56
57
58body {
59  font-family: Arial;
60  background: #f7f7f7;
61}
62.progress-pie-chart {
63  margin: 50px auto 0;
64}

javascript
1$(function(){
2  var $ppc = $('.progress-pie-chart'),
3    percent = parseInt($ppc.data('percent')),
4    deg = 360*percent/100;
5  if (percent > 50) {
6    $ppc.addClass('gt-50');
7  }
8  $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
9  $('.ppc-percents span').html(percent+'%');
10});