この円グラフは弊社サイトへの ブラウザ別アクセス割合 です。
※モーションを見逃した方はお手数ですがリロードをお願いいたします

通常サイト内に円グラフを表示させる場合は画像対応、ちょっとイイ感じにアニメーションさせたりする場合は Chart.js などのライブラリを使用することが多いかと思いますが、cssのみで結構イイ感じに表示することが可能です。(もちろんチカラワザです)
上記サンプルを例題にザックリと解説いたします。

円グラフ部分の絵画はsvg

<svg class="circle" width="280" height="280">
  <circle class="type type4 typeA4" cx="140" cy="140" r="90"></circle>
  <circle class="type type3 typeA3" cx="140" cy="140" r="90"></circle>
  <circle class="type type2 typeA2" cx="140" cy="140" r="90"></circle>
  <circle class="type type1 typeA1" cx="140" cy="140" r="90"></circle>
</svg>

上記がグラフ部分のhtmlソースになります。

• svgタグの circle は、その名前の通り円を描画します
• cx と cy で円の中心座標を設定します
• r で半径を設定します

∴サンプルは絵画領域が280×280pxですので、ド真ん中に直径180pxの真円を絵画することになります
何故4個のcircleを絵画するかというと、察しの良い方ならお分かりの通り、グラフを4色に分けるためです…4色の円を それぞれの割合にて重ねて表示する ことで1つのグラフが出来ております。

svgの初期設定

.circle{
  display:inline-block;
  transform:rotate(-90deg);
}
.circle .type{
  fill:transparent;
  stroke-width:100;
}

上記cssは一見すると、やや謎な感じがしますが…イイ感じにアニメーションさせるための基本設定となっております。

• svgタグのcircleは始点が右端となりますので、上記cssの3行目にて始点を真上に変更しております。
  ※アニメーションは上から始まる方がイイ感じになるので
• そして上記cssの6・7行目にて塗りを透過させ線を100pxの太さで絵画させてます。
  ※塗りを使用せずに線のみで絵画するのがcssでアニメーションさせるポイントです

モーショングラフィックス風のアニメーションはcssのみで完結

.typeA1{animation:circleA1 1s forwards;}
@keyframes circleA1{
  0%{stroke-dasharray:0 565;}
  99.9%,to{stroke-dasharray:350 565;}
}
.typeA2{animation:circleA2 1s forwards;}
@keyframes circleA2{
  0%{stroke-dasharray:0 565;}
  99.9%,to{stroke-dasharray:446 565;}
}
.typeA3{animation:circleA3 1s forwards;}
@keyframes circleA3{
  0%{stroke-dasharray:0 565;}
  99.9%,to{stroke-dasharray:520 565;}
}
.typeA4{animation:circleA4 1s forwards;}
@keyframes circleA4{
  0%{stroke-dasharray:0 565;}
  99.9%,to{stroke-dasharray:565 565;}
}

塗りを透過させ線を100pxの太さで絵画させていた理由が、このcss記述に集約されております。
stroke-dasharray にてsvgの破線設定が行えます。
各circleの破線をアニメーションさせることで、イイ感じにモーショングラフィックス風に表示することが可能になります。
上記circleA4を例にとると『線部分0px・隙間565px』から、1秒かけて『線部分565px・隙間565px』に変化させます、結果的に565px分の線が伸びていきます
circleの始点を真上に変更しているので真上からグルっとアニメーションします。
この場合、謎の565という数値がありますが、これは絵画したsvgの円周長になります。
半径がr="90"でしたので直径は180px、直径×円周率が円周長になりますのでザックリ565になります。
※私の時代は普通に円周率3.14で習いました

同じ仕組みを使って少しインパクトのあるものをつくってみた(悪ふざけ)

なんとなく平和な竜(peace of dragon)を描いてみた

気合いだっー！気合いだっー！気合いだっー！！

ガ◯ダム好きなOQさんに捧ぐ

まとめ

悪ふざけは兎も角として…円グラフの絵画だけではなく、オープニングで数秒アニメーションさせてみたり、少しインパクトのある画面作成をしてみたり、ボタンのhoverアクションに使用してみたり、loadingアニメーションとして使用してみたり、サイト内のちょっとしたワンポイントとして動かしてみたり・・・・と使い道は結構あるかと思います。
ようはアイデア次第ですね(と、書き切る忍耐力 ☜ これ相当必要)
※ちなみにieの場合svgは対応しておりますが stroke-dasharrayアニメーション は非対応です＞＜

オマケのおまけ