How to draw this bend line in html and css?

Question

I have draw the simple using html and css but don't know how to draw 2nd one bend line .I have use below code for draw simple line if anyone have idea how to draw this then please help for me .Its should be look like as it given in image.Refer below image and code for get the problem and help me to solve it.

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: 320;
  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: 305;
  stroke-dashoffset: 150;  
  stroke-width: 20px;
  stroke: black;
  z-index: 1;
}
        .line{
            width: 30px;
            position: absolute;
            margin-top: -120px;
            margin-left: 150px;
        }

<body>
    <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>
    <hr class="line"><p style="margin-top: -125;margin-left: 185px;">25%</p>

</body>

Rameez Bukhari · Accepted Answer · 2020-01-17 07:11:17Z

its same look your given image use this code and must wrap this graph in specific div.

body {
            background-color: darkturquoise;
        }
        
        svg {
            width: 225px;
            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: 320;
            stroke-dashoffset: 0;
            stroke-width: 20px;
            stroke: #fff;
            z-index: 4;
        }
        
        .circle2 {
            stroke-dasharray: 330;
            stroke-dashoffset: 250;
            stroke-width: 40px;
            stroke: #00aaad;
            z-index: 3;
        }
        
        .circle3 {
            stroke-dasharray: 330;
            stroke-dashoffset: 219;
            stroke-width: 39px;
            stroke: #00494a;
            z-index: 2;
        }
        
        .circle4 {
            stroke-dasharray: 305;
            stroke-dashoffset: 150;
            stroke-width: 30px;
            stroke: #000b0b;
            z-index: 1;
        }
        
        .circle5 {
            stroke-dasharray: 800;
            stroke-dashoffset: 250;
            stroke-width: 0px;
            stroke: #00aaad;
            z-index: 3;
            fill: #00aaad;
        }
        
        .line1,
        .line2,
        .line3 {
            stroke-width: 1px;
            stroke: #fff;
        }
        
        .txt1 {
            position: absolute;
            top: 110px;
            left: 185px;
            color: #fff;
        }
        
        .txt2 {
            position: absolute;
            top: 175px;
            left: 185px;
            color: #fff;
        }

<svg>
        <circle class="circle1" r="50" cx="100" cy="80"></circle>
        <circle class="circle4" r="50" cx="100" cy="80"></circle>
        <circle class="circle3" r="50" cx="100" cy="80"></circle>
        <circle class="circle2" r="50" cx="100" cy="80"></circle>
        <circle class="circle5" r="50" cx="100" cy="80"></circle>
        <line class="line1" x1="140" x2="275" y1="135" y2="135"></line>
        <line class="line2" x1="120" x2="185" y1="160" y2="290"></line>
        <line class="line3" x1="140" x2="275" y1="200" y2="200"></line>
    </svg>
    <p class="txt1">12.5%</p>
    <p class="txt2">12.5%</p>

Thankyou so much bro its exactly i need again thanks for giving your time

varontron · Accepted Answer · 2020-01-17 05:52:53Z

1

An SVG line has two points each defined with (x,y): x1,y1 and x2,y2. These values are specified using the upper left corner as the origin (0,0). For example:

 <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

To draw your "one bend line" you have 2 choices:

draw two lines, which appear to connect at the elbow
Use svg path instead.

Option 1 will likely be easier.

Here is the MDN Line Documentation

Here is the MDN Path Documenation

answered Jan 17, 2020 at 5:52

varontron

1,1798 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to draw this bend line in html and css?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related