Skip to content

Instantly share code, notes, and snippets.

@slivero

slivero/circle.svg

Created May 19, 2012 21:24
Show Gist options
  • Save slivero/2732448 to your computer and use it in GitHub Desktop.
Save slivero/2732448 to your computer and use it in GitHub Desktop.
Download ZIP
Styling the HTML5 Meter Tag Using the Shadow DOM
Display the source blob
Display the rendered blob
Raw
circle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<html>
<head>
<style type="text/css">
article {
width:520px;
height:170px;
margin: 30px auto;
font-family: Arial, sans-serif;
color: #2146CA;
font-size:17px;
background: -webkit-linear-gradient(top, rgba(219,237,239,0) 10%,rgba(219,237,239,0.7) 90%,rgba(219,237,239,1) 99%,rgba(219,237,239,1) 100%);
}
.column {
float: left;
width:240px;
margin: auto;
}
.column.left {
margin: 0 0 0 30px;
}
.column.right {
position: relative;
}
dt {
font-weight:bold;
float: left;
width:110px;
height:25px;
}
dd {
float: left;
width:80px;
height:25px;
}
/* The main meter element and star */
#raised {
-webit-style:none;
position: relative;
background-image:url(star.svg);
height:150px;
width:150px;
position: absolute;
right:20px;
}
/* The overlay shadow */
#raised:before {
content: '';
background-color:#fff;
opacity: 0.2;
height:60;
width:115;
position: absolute;
top:0;
left:17.5px;
z-index:5;
margin: 16px 0 0 0;
border-radius: 100px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
/* The percentage */
#raised:after {
content: "60%";
position: absolute;
top:65px;
right:36%;
font-family: Arial, sans-serif;
font-weight:bold;
color: #fff;
}
/**
* Shadow Dom Elements
*/
/* The central circle */
#raised::-webkit-meter-bar {
-webkit-transform: rotate(270deg);
-webkit-mask-image: url(circle.svg);
background:none;
margin: 25px 0 00px 25;
width:100px;
height:100px;
}
/* The area of the meter indicating the value */
#raised::-webkit-meter-optimum-value {
background:#134A6F;
}
</style>
</head>
<body>
<article>
<div class="column left">
<dl>
<dt>Target:</dt>
<dd>&pound;200</dd>
<dt>Raised so far:</dt>
<dd>&pound;120</dd>
</dl>
</div>
<div class="column right">
<meter id="raised" min="0" max="200" value="120" title="pounds">60%</meter>
</div>
</article>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
star.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="drawing.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient3820">
<stop
style="stop-color:#09aedc;stop-opacity:1;"
offset="0"
id="stop3822" />
<stop
style="stop-color:#4375b0;stop-opacity:1;"
offset="1"
id="stop3824" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3820"
id="linearGradient3826"
x1="31.166224"
y1="363.64944"
x2="328.20993"
y2="-40.054405"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="-14.216616"
inkscape:cy="1014.0616"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1147"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="star"
style="fill:url(#linearGradient3826);fill-opacity:1;stroke:none"
id="path2985"
sodipodi:sides="80"
sodipodi:cx="134.28571"
sodipodi:cy="246.6479"
sodipodi:r1="440.08347"
sodipodi:r2="376.599"
sodipodi:arg1="0.94677327"
sodipodi:arg2="0.98604318"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 391.42856,603.79075 -49.26263,-43.11638 20.44884,62.19062 -45.7279,-46.84857 15.50638,63.60331 -41.91123,-50.29192 10.46832,64.62386 -37.83618,-53.42521 5.36572,65.24598 -33.52785,-56.2291 0.23004,65.46584 -29.01281,-58.68634 -4.90706,65.28208 -24.31889,-60.78174 -10.01391,64.69583 -19.47504,-62.50241 -15.05902,63.71071 -14.51113,-63.83773 -20.011271,62.3328 -9.457745,-64.77948 -24.840163,60.57058 -4.346051,-65.32182 -29.515902,58.43492 0.792437,-65.46144 -34.009665,55.939 5.9260398,-65.19748 -38.2937478,53.09819 11.023107,-64.53154 -42.341737,49.93001 16.052213,-63.46775 -46.128675,46.454 20.982351,-62.01266 -49.631211,42.69158 25.78312,-60.17523 -52.82776,38.66596 30.42494,-57.96682 -55.6986,34.40195 34.87917,-55.40101 -58.22605,29.92583 39.11837,-52.49364 -60.39452,25.26522 43.11638,-49.26262 -62.19062,20.44883 46.84857,-45.72789 -63.60331,15.50638 50.29192,-41.91124 -64.62386,10.46832 53.42521,-37.83617 -65.24598,5.36572 56.2291,-33.52785 -65.46584,0.23004 58.68634,-29.01281 -65.28208,-4.90706 60.78174,-24.31889 -64.69583,-10.01391 62.50241,-19.47505 -63.71071,-15.05901 63.83773,-14.51113 -62.3328,-20.01127 64.77948,-9.45775 -60.57058,-24.84016 65.32182,-4.34605 -58.43492,-29.5159 65.46144,0.79243 -55.939,-34.00966 65.19748,5.92604 -53.09819,-38.29375 64.53154,11.023107 -49.93001,-42.341737 63.46775,16.052213 -46.454,-46.128675 62.01266,20.982351 -42.69159,-49.631214 60.17524,25.783127 -38.66596,-52.827762 57.96682,30.424941 -34.40195,-55.698607 55.40101,34.879175 -29.92583,-58.226052 52.493636,39.118367 -25.265216,-60.394514 49.262623,43.116381 -20.448837,-62.190621 45.727895,46.848565 -15.50638,-63.603305 41.911234,50.291916 -10.468321,-64.623856 37.8361779,53.4252 -5.36572116,-65.24598 33.52784826,56.22911 -0.23004,-65.46584 29.012808,58.68634 4.90706,-65.28208 24.318895,60.78174 10.013908,-64.69583 19.47504,62.50241 15.05902,-63.71071 14.51113,63.83773 20.01127,-62.3328 9.45775,64.77947 24.84016,-60.57058 4.34605,65.32183 29.5159,-58.43493 -0.79243,65.46145 34.00966,-55.939 -5.92604,65.19748 38.29375,-53.09819 -11.02311,64.53154 42.34174,-49.93001 -16.05221,63.467748 46.12867,-46.453998 -20.98235,62.012656 49.63121,-42.691586 -25.78312,60.17524 52.82776,-38.66596 -30.42494,57.966816 55.6986,-34.401947 -34.87917,55.4010107 58.22605,-29.9258357 -39.11837,52.49364 60.39452,-25.265221 -43.11638,49.262628 62.19062,-20.448837 -46.84857,45.727895 63.60331,-15.506381 -50.29192,41.911235 64.62386,-10.468321 -53.4252,37.836178 65.24598,-5.36572 -56.22911,33.52785 65.46584,-0.23004 -58.68634,29.01281 65.28208,4.90705 -60.78174,24.3189 64.69583,10.01391 -62.50241,19.47504 63.71071,15.05901 -63.83773,14.51113 62.3328,20.01128 -64.77947,9.45775 60.57058,24.84016 -65.32183,4.34605 58.43493,29.5159 -65.46145,-0.79244 55.939,34.00967 -65.19748,-5.92604 53.09819,38.29375 -64.53154,-11.02311 49.93001,42.34174 -63.46775,-16.05222 46.454,46.12868 -62.01266,-20.98235 42.69159,49.63121 -60.17524,-25.78312 38.66596,52.82776 -57.96682,-30.42494 34.40195,55.6986 -55.40101,-34.87917 29.92583,58.22605 -52.49363,-39.11837 z"
transform="matrix(0.17073006,0,0,0.17074044,52.178989,32.772517)" />
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment