Charts info graphic

<h1 class="charts--headline">Wanna check the code?<br>Click "Edit this pen" in left bottom corner.</h1>
<div class="charts--container">
  <ul>
    <li class="chart">
      <h3 class="chart--subHeadline">Chart 1</h3>
      <h2 class="chart--headline">Pie Question Would Go Here</h2>
      <div id="pieChart">
        <svg id="pieChartSVG">
          <defs>
            <filter id='pieChartInsetShadow'>
              <feOffset dx='0' dy='0'/>
              <feGaussianBlur stdDeviation='3' result='offset-blur' />
              <feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' />
              <feFlood flood-color='black' flood-opacity='1' result='color' />
              <feComposite operator='in' in='color' in2='inverse' result='shadow' />
              <feComposite operator='over' in='shadow' in2='SourceGraphic' />
            </filter>
            <filter id="pieChartDropShadow">
              <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
              <feOffset in="blur" dx="0" dy="3" result="offsetBlur" />
              <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
        </svg>
      </div>
    </li>
    <li class="chart">
      <h3 class="chart--subHeadline">Chart 2</h3>
      <h2 class="chart--headline">Area Label Would Go Here</h2>
      <div id="lineChart">
        <svg id="lineChartSVG" class="lineChart--svg">
          <defs>
            <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
              <stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
              <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </li>
  </ul>
</div>