<div class="buttons">
  <button>Play Demonstration</button>
</div>
<svg width="501px" height="255px" viewBox="-4 -4 508 255" id="container">
    <g id="slice-1" class="slice slice-1" style="background: yellow">
        <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        <!-- <use xlink:href="#icon-photo" width="20" height="20"/>--></g>
    <g id="slice-2" class="slice slice-2">
        <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        <g id="slice-3" class="slice slice-3">
            <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        </g>
        <g id="slice-4" class="slice slice-4">
            <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        </g>
        <g id="slice-5" class="slice slice-5">
            <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        </g>
         <g id="slice-6" class="slice slice-6">
            <path fill="transparent" stroke="#111" stroke-width="2" d="M250,250 l250,0 A250,250 0 0,0 466.5063509461097,125 z" />
        </g>
    </g>
</svg>

body {
    background-color: #f5f5f5;
    padding: 2em;
    margin: 0 auto;
    width: 500px;
}
button {
  padding: .5em 1em;
  border: 1px solid #ddd;
  background-color: #222;
  color: white;
  border-radius: .25em;
}
button:hover {
  background-color: deepPink;
}
button:active {
  outline: none;
}
.buttons {
  margin: 1em 0;
}
svg {
  display: block;
  background-color: white;
}
.slice path {
      stroke-width: 3;
     transform-origin: 250px 250px;
     stroke-dasharray: 650;
     stroke-dashoffset: 650;
     transition: fill .3s linear;
 }
 .slice-1 path.animate {
     stroke: #aaa;
     animation: draw 1s ease forwards;
 }

 .slice-2 path.animate {
     stroke: #111;
     animation: draw 1s ease 1s forwards, rotate-2 .5s ease 2s forwards;
 }

 .slice-3 path.animate {
     stroke: #111;
     animation: draw 1s ease 2s forwards, rotate-3 .5s ease 3s forwards;
 }

 .slice-4 path.animate {
     stroke: #111;
     animation: draw 1s ease 3s forwards, rotate-4 .5s ease 4s forwards;
 }

 .slice-5 path.animate {
     stroke: #111;
     animation: draw 1s ease 4s forwards, rotate-5 .5s ease 5s forwards;
 }

.slice-6 path.animate {
     stroke: #111;
     animation: draw 1s ease 5s forwards, rotate-6 .5s ease 6s forwards;
 }

 @keyframes draw {
     to {
         stroke-dashoffset: 0;
     }
 }
 @keyframes rotate-2 {
     to {
         transform: rotate(-30deg);
     }
 }
 @keyframes rotate-3 {
     to {
         transform: rotate(-60deg);
     }
 }
 @keyframes rotate-4 {
     to {
         transform: rotate(-90deg);
     }
 }
 @keyframes rotate-5 {
     to {
         transform: rotate(-120deg);
     }
 }
 @keyframes rotate-6 {
     to {
         transform: rotate(-150deg);
     }
 }

var play = document.getElementsByTagName('button')[0],
    
    paths = document.querySelectorAll('.slice path');

function drawItems() {
    for (var i = 0; i < paths.length; i++) {
        paths[i].classList.add('animate');
    }
}

play.addEventListener('click', drawItems, false);