Search code examples
htmlcsscss-shapes

Want create this graph using css and html

I have tried this code but facing problem with size.Facing problem while changing size of circle border so please help me to solve this problem.Run code on snippet and will be know what problem i have and it should be look like as in image i have given. This is the code by using css in html. How to customize the graph. By using css in html in order to make the graphs parts particular size change, but the graph cannot be customized. how to customize it. It is possible to customize in css?

body{
  background: darkturquoise;
}

.circle-sector {
  overflow: hidden;
  width: 150px;
  height: 75px;
  transform-origin: 50% 100%;
  position: absolute; 
}

.circle {
  margin-top:18px;
    margin-left:5px;
  width: 90px;
  height: 60px;
  border-radius: 60px 60px 0 0;
  background: #00aaad ;
  transform-origin: 50% 100%;
  transform: rotate(90deg);
    
}

.center {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  background: darkturquoise;
  border-radius: 50%;
  margin-top: 60px;
  transform: rotate(0deg);
  position: absolute;
   
}
.another-circle {
  width: 100px;
  margin-left: 0px;
  height: 50px;
  margin-top: 0px;
  border-radius: 50px 50px 0 0;
  background: white;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
}
.another-circle1 {
 margin-top: 10px;
 margin-left: 30px;
  width:120px;
  height: 80px;
  border-radius: 20px 30px 0 0;
  background: gray ;
  transform-origin: 50% 100%;
  transform: rotate(-100deg);
}  
 .another-circle2 {
  margin-top:0px; 
  margin-left: 0px;
  width: 90px;
  height: 45px;
  border-radius: 45px 50px 0 0;
  background: black ;
  transform-origin: 50% 100%;
  transform: rotate(-145deg);
} 
<div class="circle-sector" style="transform: rotate(0deg);">
  <div class="circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(-90deg);">
  <div class="another-circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(180deg);" >
  <div class="another-circle1"></div>
</div> 
    <div class="circle-sector" style="transform: rotate(250deg);" >
  <div class="another-circle2"></div>
</div>  
<div class="center"></div>

enter image description here

Solution

  • I'd suggest redrawing the circles in an <SVG>. Adjust the stroke-width, stroke-dasharray, and stroke-dashoffset as necessary.

    body {
  background-color: darkturquoise;
}
svg {
  width: 200px;
  height: 200px;
}
circle {
  fill: none;
  stroke-linecap: butt;
  transform: rotate(-86deg);
  transform-origin: center;
  
  animation-name: drawCircle;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.circle1 {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;  
  stroke-width: 10px;
  stroke: #fff;
  z-index: 4;
}
.circle2 {
  stroke-dasharray: 330;
  stroke-dashoffset: 250;  
  stroke-width: 30px;
  stroke: #00aaad;
  z-index: 3;
}
.circle3 {
  stroke-dasharray: 330;
  stroke-dashoffset: 200;;  
  stroke-width: 30px;
  stroke: grey;
  z-index: 2;
}
.circle4 {
  stroke-dasharray: 330;
  stroke-dashoffset: 150;  
  stroke-width: 20px;
  stroke: black;
  z-index: 1;
}
    <svg>
  <circle class="circle1" r="50" cx="100" cy="100"></circle>
  <circle class="circle4" r="50" cx="100" cy="100"></circle>
  <circle class="circle3" r="50" cx="100" cy="100"></circle>

  <circle class="circle2" r="50" cx="100" cy="100"></circle>


</svg>