How to fill a rectange from center html , css

Question

This is what i need to do using css + html + jquery... i can write the jquery code as to just taking the input percentage.. i need help drawing this..

Well a simple fill is by :

    <svg width="400" height="110">
  <rect width="100" height="100" style="fill:rgb(0,0,255);">
  Sorry, your browser does not support inline SVG.  
</svg>

I'd take a look at this: http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle — Samuel Cook, Feb 03 '16 at 19:53
thanks for the reply..thats a elliptical fill.. a lot of references are there for that.. i need a square fill.. — Aniket, Feb 03 '16 at 20:09
You can easily do this either with SVG or with canvas using clipping. 1. create a rectangular clipping region so all drawings only appear inside the clipped rectangle, 2. draw a red rectangle 3. draw a lighter red arc which is desired-X-percent with a radius well beyond the rectangle, 4. draw the text. — markE, Feb 03 '16 at 21:42

zero point · Answer 1 · 2016-02-03T20:24:00.147

1

Check out this example in CODEPEN. I manged to build it only using CSS and HTML.

HTML

<div class="container">
  <div class="triangle"></div>
  <div class="percentage">
     92%
  </div>
  <div class="description">
     Goal Achievement <br /> Projection by End Date
  </div>
</div>

CSS

.container {
   position: relative;
   background: #E96C6A;
   width: 150px;
   height: 150px;
   color: white;
   z-index: 1;
}

.triangle {
   position: absolute;
   width: 0;
   height: 0;
   left: 40px;
   border-top: 70px solid #E8908F;
   border-left: 50px solid transparent;
   z-index: 2;
}

.percentage {
   position: relative;
   padding-top: 50px;
   padding-bottom: 5px;
   width: 100%;
   font-size: 3em;
   text-align: center;
   z-index: 3;
}

.description {
  position: relative;
  width: 100%;
  font-size: 0.8em;
  text-align: center;
}

Definitely, you can improve it by changing the font and sizes of elements to what they want. But the structure remains the same.

edited Feb 03 '16 at 20:24

answered Feb 03 '16 at 20:18

zero point

1,290
3
10
15

thats a nice try.. but thats not what i need.. the percentage value is dynamic.. it can be 42.65%... so to build a javascript logic around this html + css would be too messy – Aniket Feb 03 '16 at 20:23
What do you mean by "would be too messy"? I just added a button to dynamically change percentage. It works like a charm. Check it out http://codepen.io/zero_point/pen/QyVGzg – zero point Feb 03 '16 at 20:28
dude.. what about the background.. don't you think the solid red should also fill 42.65% of the 100% square...?? – Aniket Feb 03 '16 at 20:31
First of all, I am trying to help you, so be nice. Second, nobody does change the size of layout or sub-layout, it is a bad UX. Your red background should always stay the same relative to the width of your viewport. If you define its width and height based by %, you will be fine. Additionally, you need to change your font size on smaller devices or viewport, another UX compromise. Anyway, good luck – zero point Feb 03 '16 at 21:24
@zeropoint. 3 thoughts: 1. you have nicely recreated the requested design (upvote), 2. the question is unclear because the OP evidently wants the lighter area to be changeable to X percent of the complete rectangle (but that was only made clear in their comment to you), 3. user2740034 seemed to take a rude tone in their comment to you. – markE Feb 03 '16 at 21:44
@zeropoint Apologies for being rude.. wasn't meant to be rude... But if you check that link.. you will come to know.. anyways Paul LeBeau made my day... thanks..!!! :P – Aniket Feb 04 '16 at 08:32

Paul LeBeau · Accepted Answer · 2016-02-04T09:09:18.203

It's fairly easy to make a simple pie chart. We just need to use a little trigonometry to calculate the coords of the arc to the percentage position.

And since the circumference of the pie chart is outside the bounds of the SVG and so is not visible, we can get away with using a single arc. Somethimes there can be an accuracy problem when you use just one arc ('A') path command for angles above 180 degrees.

Demo

function setPie(cx, cy, fraction)
{
  // Get reference to the <path> element that we use to make the "pie chart"
  var pie = document.getElementById("pie");
  // Pie radius (just a value we can be sure is large enough to fall outside SVG bounds)
  var radius = cx+cy;
  // Calculate end angle of pie chart (radians)
  var angle = fraction * 2 * Math.PI;
  // End coordinates of circular arc
  var endX = cx + Math.sin(angle) * radius;
  var endY = cy - Math.cos(angle) * radius;
  // Let renderer know we want to use the long direction if the arc > 180deg
  var largeArcFlag = (fraction > 0.5) ? 1 : 0;
  if (fraction < 1.0) {
    // Set the path command string with a path representing a circular sector of the right amount.
    pie.setAttribute("d", ["M", cx, cy,         // move
                           "L", cx, cy-radius,  // vertical line at fraction=0
                           "A", radius, radius, 0, largeArcFlag, 1, endX, endY,  // arc
                           "Z"].join(' '));
  } else {
    // Special case for 100%. The arc form above doesn't render properly when arc end = arc start
    // So we just make a rectangle instead
    pie.setAttribute("d", ["M", 0, 0,         // move
                           "L", 2*cx, 0, 2*cx, 2*cy, 0, 2*cy,  // lines to form a rect
                           "Z"].join(' '));
  }
    
}


// First two values are center-X and center-Y of the pie chart.
// Third value is the percentage (in the form of a fraction).

setPie(64, 66, 0.92);

svg .bg {
  fill: #e28f8d;
}

#pie {
  fill: #e16b67;
}

<svg width="128" height="132">
  <rect class="bg" width="100%" height="100%"/>
  <path id="pie" d="M0 0"/>
</svg>

Thanks man.. exactly what i needed... You saved my day.!! :) :) :) — Aniket, Feb 04 '16 at 08:29
BTW, it's broken in IE -- the full 92 degree circle shows (not clipped into the rec). — markE, Feb 04 '16 at 17:45

How to fill a rectange from center html , css

2 Answers2