Simple Svg Pie Chart without Images

by muthu[ Edit ] 2014-03-12 12:21:08

Simple Svg Pie Chart without Images

-------------------------------------------DEMO-----------------------------------------------------

-----------------------------------------HTML5 & SVG------------------------------------------------

<h2>Simple Svg Pie Chart without Images</h2>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="450px" height="450px" viewBox="0 0 550 550" enable-background="new 0 0 650 650" xml:space="preserve">
<path class="path1 hint--right" display="none" fill-rule="evenodd" clip-rule="evenodd" fill="#3bbec0" d="M519.961,0c0,173.32,0,346.641,0,519.961
c-173.32,0-346.641,0-519.961,0C0,346.641,0,173.32,0,0C173.32,0,346.641,0,519.961,0z M2.039,8.156c0,169.923,0,339.844,0,509.766
c171.96,0,343.922,0,515.883,0c0-171.96,0-343.922,0-515.883c-171.281,0-342.563,0-513.844,0C1.702,2.382,1.864,5.262,2.039,8.156z" />
</a>
<path class="path1" display="none" fill-rule="evenodd" clip-rule="evenodd" fill="#e87352" d="M519.961,0c4.758,169.922,0.68,348.68,2.039,522
c-173.32-1.359-352.078,2.719-522-2.039c173.32,0,346.641,0,519.961,0C519.961,346.641,519.961,173.32,519.961,0z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#ebc85e" d="M261,256.922c-40.318-69.791-82.828-137.391-120.305-210.023
C182.628,24.609,241.32,7.873,303.82,18.352c-14.612,77.146-28.701,154.814-40.781,234.492 C261.056,252.9,261.457,255.339,261,256.922z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#f4732f" d="M267.117,258.961c62.063-50.084,121.995-102.302,183.516-152.93
c2.91,0.488,3.439,3.358,6.117,4.078c27.84,39.449,50.834,83.744,50.977,150.891c-80.203,0-160.406,0-240.609,0
C267.117,260.32,267.117,259.641,267.117,258.961z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#a6e0a6" d="M452.672,420.047c-61.332-51.498-130.12-106.409-185.555-157.008
c80.203,0,160.406,0,240.609,0C508.866,334.866,482.638,379.326,452.672,420.047z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#f04d4e" d="M426.164,446.555c-33.1,26.034-69.178,49.087-120.305,57.094
c-12.961-78.117-26.367-155.789-40.781-232.453c8.89-1.627,13.589,8.582,20.391,14.273
c51.528,43.114,110.877,91.079,163.125,134.578c0.574,3.293-1.927,3.511-2.039,6.117
C438.904,432.107,432.107,438.904,426.164,446.555z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#c22d41" d="M263.039,252.844c0,0.68,0,1.359,0,2.039
c15.489-69.473,28.346-159.248,42.82-236.531c66.188,14.695,115.194,46.571,150.891,91.758c-2.678-0.72-3.207-3.59-6.117-4.078
c-59.153,43.48-129.423,104.389-183.516,152.93c0,0.68,0,1.359,0,2.039c-2.678-0.72-3.207-3.59-6.117-4.078
C261.457,255.339,261.056,252.9,263.039,252.844z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#3f9ce9" d="M142.734,265.078c-1.734-0.375-1.924,0.795-2.039,2.039
c-3.196-0.72,1.785-3.59-2.039-4.078c1.728-3.03,6.565-2.951,10.195-4.078c4.171,6.583-11.58,2.865-4.078,6.117
C144.386,267.393,142.728,266.21,142.734,265.078z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#ba025a" d="M426.164,446.555c5.943-7.65,12.74-14.447,20.391-20.391
C440.611,433.814,433.814,440.611,426.164,446.555z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#7a2e88" d="M256.922,265.078c-32.925,68.351-81.423,138.795-118.266,210.023
c-51.044-26.44-83.812-71.156-108.07-124.383C103.457,319.597,182.747,294.896,256.922,265.078z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#2f81b1" d="M258.961,256.922c-74.015-19.782-149.837-55.428-226.336-79.523
c17.529-58.596,55.504-96.745,101.953-126.422C180.486,115.177,214.942,190.832,258.961,256.922z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#96c34c" d="M256.922,261c-71.359,31.953-151.241,55.385-224.297,85.641
c-24.391-40.532-22.71-123.926-2.039-167.203C107.719,204.937,180.05,235.24,256.922,261z"/></a>
<path class="path1" fill-rule="evenodd" clip-rule="evenodd" fill="#1cba9a" d="M261,267.117c15.949,77.848,28.095,159.499,42.82,238.57
c-64.635,7.348-130.13-1.586-163.125-32.625C181.364,404.98,220.586,335.454,261,267.117z"/></a>
<line fill-rule="evenodd" clip-rule="evenodd" fill="#D5F30B" x1="265.229" y1="272" x2="263.917" y2="264.5"/>
</svg></a>

---------------------------------------------CSS---------------------------------------------------

body { font:12px Arial, Helvetica, sans-serif;}
.path1 { transition: .6s fill; stroke:#fff; stroke-width:3; }
.path1:hover { fill: #2c3e50; }
.hint--right:before { border-right-color: #383838; } .hint--right:before { margin-left: -12px; margin-bottom: -6px; }
.hint--right:after { margin-bottom: -14px; } .hint--right:before, .hint--right:after { left: 100%; bottom: 50%; }
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before { -webkit-transform: translateX(8px);
-moz-transform: translateX(8px); transform: translateX(8px); } .hint--error.hint--right:before { border-right-color: #b34e4d; }
.hint--warning.hint--right:before { border-right-color: #c09854; } .hint--info.hint--right:before { border-right-color: #3986ac; }
.hint--success.hint--right:before { border-right-color: #458746; }
.hint--always.hint--right:after, .hint--always.hint--right:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); }
.hint, [data-hint] { position: relative; display: inline-block; }
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { position: absolute; -webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none;
-webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; }
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before,
[data-hint]:focus:after { visibility: visible; opacity: 1; }
.hint:before, [data-hint]:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 1000001; }
.hint:after, [data-hint]:after { content: attr(data-hint); background: #383838; color: white; text-shadow: 0 -1px 0px black; padding: 8px 10px;
font-size: 12px; line-height: 12px; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }

Tagged in:

1263

0

0

Previous

Next

You must LOGIN to add comments

Tags

Comments