hello readers!
We designers have to deal with HTML pages and CSS every time. We have so many properties that will make a page to new look and making it more stylish by adding animation, keyframe and different effects to it. There are many enough things to do with CSS.

You have seen Semi-circle donut chart, 3d-pie charts and pie-chart with drill down, Basically designing of this chart is possible through  jquery  but with the help of  pureCSS  this could be possible. this chart is used for getting information and to highlight a particularly important elements, In this chart each section has the same size that is proportional to the data found in the series. Below is the source code that will hopefully useful for making the Semi-circle Donut chart.

Add the following code to your standard CSS this code will explain you better...

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #DDFFDD;
  text-align: center;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

section {
  display: inline-block;
  width: 33.33%;
  margin: 50px 0;
  text-align: center;
  min-width: 320px;
  position: relative;
}

.tooltip {
  position: absolute;
  background: #eee;
  padding: 3px;
  font-weight: 100;
  font-size: 12px;
  border-radius: 2px;
  border: 1px solid  #ddd;
  bottom: 100%;
  left: 50%;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #2DABD8;
}
.tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #2DABD8;
  display: inline-block;
  margin-right: 5px;
}

.graph {
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 22px;
  line-height: 280px;
  font-weight: 600;
  border-radius: 150px 150px 0 0;
  overflow: hidden;
  color: #0ff;
}
.graph:before, .graph:after {
  content: '';
  width: 300px;
  height: 150px;
  border: 50px solid #0ff;
  border-top: none;
  position: absolute;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  border-radius: 0 0 300px 300px;
  -webkit-animation: demo 2s;
  animation: demo 2s;
  left: 0;
  top: 100%;
  z-index: 5;
}
.graph:after {
  z-index: 3;
  border-color: rgba(0, 0, 0, 0.15);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.graph:hover:before {
  opacity: .8;
  cursor: pointer;
}
.graph:hover + .tooltip {
  bottom: 105%;
  opacity: 1;
}

.multi-graph {
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  color: #fff;
  font-size: 22px;
  line-height: 280px;
  font-weight: 600;
  color: #000;
}
.multi-graph:before {
  content: '';
  width: 300px;
  height: 150px;
  border: 50px solid rgba(0, 0, 0, 0.15);
  border-bottom: none;
  position: absolute;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  border-radius: 300px 300px 0 0;
  left: 0;
  top: 0;
}
.multi-graph .graph {
  position: absolute;
  top: 0;
  left: 0;
}
.multi-graph .graph:after {
  background: #eee;
  border: medium none;
  border-radius: 2px;
  color: #333;
  font-weight: 200;
  content: "" attr(data-name) "";
  display: inline-block;
  font-size: 12px;
  height: 20px;
  left: 50%;
  line-height: 20px;
  padding: 0 5px;
  top: 50px;
  z-index: 0;
  -webkit-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  width: auto;
  opacity: 0;
}
.multi-graph .graph:hover:after {
  opacity: 1;
  top: 70px;
}

.model-1 .graph {
  color: #EC4A26;
}
.model-1 .graph:before {
  -webkit-transform: rotate(100deg);
  transform: rotate(100deg);
  border-color: #EC4A26;
}

section.model-2 .graph {
  color: #2DABD8;
}
section.model-2 .graph:before {
  -webkit-transform: rotate(130deg);
  transform: rotate(130deg);
  border-color: #2DABD8;
}

section.model-3 .javaScript:before {
  -webkit-transform: rotate(80deg);
  transform: rotate(80deg);
  border-color: #FEDA3E;
}
section.model-3 .jQuery:before {
  -webkit-transform: rotate(130deg);
  transform: rotate(130deg);
  border-color: #0669AD;
}
section.model-3 .angular:before {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  border-color: #E62A39;
}
section.model-3 .graph {
  color: #2DABD8;
}
@-webkit-keyframes demo {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes demo {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

Here is HTML code:

<!DOCTYPE HTML>
<html>
<head>
The "Pie", "Donut" or "Semi-circular" charts
</head>
    <body>
        <section class="model-1">
            <div class="graph">HTML5</div>
        </section>
        <section class="model-2">
            <div class="graph">CSS3</div><span tooltip="70%" class="tooltip">CSS3</span>
        </section>
        <section class="model-3">
            <div class="multi-graph">javaScript
                <div data-name="jQuery" class="graph jQuery"> </div>
                <div data-name="javaScript" class="graph javaScript"></div>
                <div data-name="Angular JS" class="graph angular"> </div>
            </div>
        </section>
    </body>
</html>