Gráficos circulares - pie charts en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en gráficos circulares - pie charts en CSS3...

<style>
  main{
    width: 100%;
    padding: 60px 0;
  }
  .chart{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 29px;
  }
  .chart > p{
    width: 199px;
  }
  .chart > div{
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    background-color: #E8E2D6;
    background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
  }
  .chart:nth-of-type(1) div::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    transform: rotate(.3turn);
  }
  .chart:nth-of-type(2) div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    animation: pie-chart-spin1 3s linear 1.6 forwards,
                pie-chart-bg1 3s step-end 1 forwards;
  }
  .chart:nth-of-type(3) > div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    animation: pie-chart-spin1 3s linear 1.6 forwards,
                pie-chart-bg1 3s step-end 1 forwards;
  }
  .chart:nth-of-type(3) > div::before{
    animation-delay: -1.5s;
  }
  svg{
    width: 100px; height: 100px;
    transform: rotate(-90deg);
    background: #E8E2D6;
    border-radius: 50%;
  }
  .chart:nth-of-type(4) svg > circle{
    fill: #E8E2D6;
    stroke: #b4a078;
    stroke-width: 32;
    stroke-dasharray: 0 100;
    animation: pie-chart-fillup 6s linear infinite;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(1){
    fill: #fff;
    stroke: #b4a078;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 36% */
    stroke-dashoffset: -64;
    animation: pie-chart-per1 2s linear 1 forwards;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(2){
    fill: transparent; 
    stroke: #cabca0;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 32% */
    stroke-dashoffset: -32;
    animation: pie-chart-per2 2s linear 1 forwards;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(3){
    fill: transparent; 
    stroke: #e1d9c9;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 32% */
    stroke-dashoffset: 0;
    animation: pie-chart-per3 2s linear 1 forwards;
  }
  @keyframes pie-chart-spin1 {
    to { transform: rotate(.5turn); }
  }
  @keyframes pie-chart-bg1 {
    to { background: #b4a078; }
  }
  @keyframes pie-chart-spin2 {
    to { transform: rotate(.5turn); }
  }
  @keyframes pie-chart-bg2 {
    50% { background: #b4a078; }
  }
  @keyframes pie-chart-fillup{
    to { stroke-dasharray: 100 100; }
  }
  @keyframes pie-chart-per1{
    to { stroke-dasharray: 37 100; }
  }
  @keyframes pie-chart-per2{
    to { stroke-dasharray: 32 100; }
  }
  @keyframes pie-chart-per3{
    to { stroke-dasharray: 32 100; }
  }
</style>

<main>
    <div class="chart">
      <p>① rotate()</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>② css animation</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>④ start animation from the specified location</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>⑤ SVG change dasharray to percentage</p>
      <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16"></circle>
      </svg>
    </div>
    <div class="chart">
      <p>⑥ SVG add multiple colors</p>
      <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16"></circle>
        <circle r="16" cx="16" cy="16"></circle>
        <circle r="16" cx="16" cy="16"></circle>
      </svg>
    </div>
</main>

Ver resultado