hourglass money svg infochart

by mrjordy

HTML

<div class="MeetingPageInfographicContainer">
  <div class="MeetingPageInfographic">
    <div class="Hourglass">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="244" height="342" viewBox="0 0 244 342">
        <path d="M4.000,5.000 L238.876,5.000 C238.876,5.000 238.876,20.165 238.876,24.013 C238.876,27.861 236.713,29.617 234.381,29.617 C232.049,29.617 214.152,29.617 214.152,29.617 C214.152,29.617 214.699,45.128 213.029,58.799 C211.358,72.470 205.463,95.532 195.048,113.718 C181.646,137.118 159.086,150.028 159.086,170.879 C159.086,191.730 177.901,210.140 187.181,225.799 C196.461,241.457 202.840,255.649 207.410,270.631 C211.979,285.612 213.029,314.342 213.029,314.342 C213.029,314.342 233.374,314.342 235.505,314.342 C237.635,314.342 240.000,315.311 240.000,318.826 C240.000,322.340 240.000,339.000 240.000,339.000 L4.000,339.000 C4.000,339.000 4.000,321.501 4.000,318.826 C4.000,316.150 4.678,314.342 8.495,314.342 C12.312,314.342 30.971,314.342 30.971,314.342 C30.971,314.342 32.522,286.571 36.590,271.752 C40.659,256.932 52.325,233.859 63.562,217.953 C74.799,202.047 86.038,189.616 86.038,172.000 C86.038,154.384 74.283,150.666 61.314,130.530 C49.051,111.490 37.634,85.082 34.343,65.523 C31.052,45.965 30.971,29.617 30.971,29.617 C30.971,29.617 12.512,29.617 9.619,29.617 C6.726,29.617 4.000,28.391 4.000,25.134 C4.000,21.877 4.000,5.000 4.000,5.000 Z"
        class="cls-1" />
        <path d="M62.000,308.000 L184.000,308.000 C184.000,308.000 183.628,289.825 169.000,281.000 C154.372,272.175 152.784,282.443 135.000,271.000 C130.215,267.921 123.676,253.292 123.000,253.000 C122.358,252.723 118.866,265.993 112.000,270.000 C93.487,280.804 94.770,274.742 83.000,279.000 C71.043,283.325 64.798,281.881 62.000,308.000 Z"
        class="cls-2" />
        <path d="M172.000,84.000 C172.000,84.000 170.147,94.679 160.000,106.000 C149.853,117.321 145.016,118.895 137.000,135.000 C128.984,151.105 124.000,169.000...

CSS

.MeetingPageInfographicContainer {
  position: relative;
  width: 100%;
  font-family: kalinga;
  font-size: 12px;
}


/*------------------ hourglass ---------------------*/

.cls-1 {
  stroke-width: 25px;
}

.cls-1,
.cls-2 {
  stroke: #3e628f;
  fill: none;
  fill-rule: evenodd;
}

.Hourglass {
  position: absolute;
  margin-left: calc(50% - 119px);
  margin-top: 220px;
}
/*------------------ blurbs ---------------------*/
.infoSection {
  width: 260px;
  border: 2px solid #3e628f;
  position: absolute;
  padding: 2px;
}
.infoTitle {
  background: #3e628f;
  color: white;
  width: 100%;
  text-align: center;
}
.infoExplain {
  color: #3e628f;
  text-align: center;
}
.infoItems > p {
  display:list-item;
  margin-top:0;
  margin-bottom: 0;
  margin-left: 20px
}
#infoSection1 {
  margin-left: calc(50% - 130px)
}
#infoSection2 {
  margin-left: calc(50% - 450px);
  margin-top: 60px;
}
#infoSection3 {
  margin-left: calc(50% + 190px);
  margin-top: 60px;
}
#infoSection4 {
  margin-left: calc(50% - 430px);
  margin-top: 540px;
}
#infoSection5 {
  margin-left: calc(50% + 170px);
  margin-top: 540px;
}
/*------------------ graph ---------------------*/
#meetingsGraph {
  font-size: 11px;
  width: 664px;
  overflow: hidden;
  text-align: center;
  position: absolute;
  margin-top: 300px;
  margin-left: calc(50% - 786px);
  border: 2px solid #3e628f;
  padding: 2px;
}
.graph-title {
  background: #3e628f;
  color: white;
  width: 100%;
  text-align: center;
}
#meetingsGraph,.graph-section {
  height: 180px;
}

#meetingsGraph .graph-section {
  display: inline-block;
  cursor: default;
  padding: 0 2px;
}

#meetingsGraph .graph-bar {
  width: 100%;
  height: 5px;
  background: #3e628f;
}

#meetingsGraph .graph-caption {
  margin-top: 5px;
}

.redtext {
  color: #FF4500;
}
.whitetext{
  color: white;
}
.bluetoredbackground {
  background: linear-gradient( 0deg, #3e628f 56px, red 56px ) !important;
}
.meetingGraphDemarcText {
  position: absolute;
  left:...