CODEWITHSUNDEEP
javascripthtmlcss
Suraj-Ui
Suraj-Ui

Reputation: 196

How to draw this bend line in html and css?

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>

enter image description here

Upvotes: 1

Views: 863

Answers (2)

Rameez Bukhari
Rameez Bukhari

Reputation: 486

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>

Upvotes: 2

varontron
varontron

Reputation: 1157

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:

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

Option 1 will likely be easier.

Here is the MDN Line Documentation

Here is the MDN Path Documenation

Upvotes: 1

Related Questions