<div class="css-live-wrap">
    <hgroup class="percentage-pie">
        <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
						<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
						<!-- Wave -->
						<g id="wave">
							<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 140.6 94.24 45.08 106.32 200 100 A 95 95 0 0 1 0 100 Z">
							<animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
														M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
														M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
							</path>
						</g>
						<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
						<circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
					</svg>
    </hgroup>
</div>
.css-live-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.