<svg id="Accreditation-Infographic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1132.2 559" preserveAspectRatio="xMinYMin meet">
  <title>Accreditation-Process</title>
  <g id="Background">
    <rect width="1132.2" height="558.97" style="fill: #fff"/>
  </g>
  <g id="Background_Arrow" data-name="Background Arrow">
    <polygon points="1023.1 559 0 559 0 0 1023.1 0 1100.9 278.6 1023.1 559" style="fill: #f1f3f5"/>
  </g>
  <g id="Infographic_Content" data-name="Infographic Content">
    <g>
      <line x1="848.1" y1="299.4" x2="846.4" y2="295.8" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <line x1="844.6" y1="292.1" x2="824.4" y2="249" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px;stroke-dasharray: 8.279643058776855,4.139821529388428"/>
      <line x1="823.5" y1="247.1" x2="821.8" y2="243.5" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <polygon points="851.6 293.4 855.6 315.5 841.1 298.3 851.6 293.4" style="fill: #bcbec0"/>
    </g>
    <g>
      <line x1="500.8" y1="259.5" x2="499.1" y2="263.1" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <line x1="497.4" y1="266.9" x2="477.2" y2="310" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px;stroke-dasharray: 8.279643058776855,4.139821529388428"/>
      <line x1="476.3" y1="311.9" x2="474.6" y2="315.5" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <polygon points="493.9 260.6 508.4 243.5 504.4 265.6 493.9 260.6" style="fill: #bcbec0"/>
    </g>
    <g>
      <line x1="180.6" y1="243.5" x2="182.3" y2="247.1" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <line x1="184.1" y1="250.9" x2="204.3" y2="293.9" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px;stroke-dasharray: 8.279643058776855,4.139821529388428"/>
      <line x1="205.2" y1="295.8" x2="206.9" y2="299.4" style="fill: none;stroke: #bcbec0;stroke-miterlimit: 10;stroke-width: 4px"/>
      <polygon points="199.9 298.3 214.4 315.5 210.4 293.4 199.9 298.3" style="fill: #bcbec0"/>
    </g>
    <g id="Step_Request" data-name="Step Request">
    <text transform="translate(174.7 122.5)" style="font-size: 36px;fill: #2b3990;font-family: Trade Gothic Next W01;font-weight: 900">Request</text>
    <text transform="translate(177.7 155.1)" style="font-size: 18px;fill: #58595b;font-family: Trade Gothic Next W01;">Send your request electronically to <tspan x="0" y="21.6">the Accreditation Coordinator.</tspan></text>
    <g id="Arc_Icon_Request"></g>
      <g id="Icon_Request" data-name="Icon Request">
        <path d="M118.9,141.6a8.3,8.3,0,0,0-2.6-2.8L93.1,120.3a6.8,6.8,0,0,0-9.3,0L60.6,138.8a7.8,7.8,0,0,0-2.6,2.8,8.9,8.9,0,0,0-.7,4.1v31a6.7,6.7,0,0,0,6.6,6.7H113a6.7,6.7,0,0,0,6.6-6.7v-31A8.2,8.2,0,0,0,118.9,141.6ZM80.2,134a12.8,12.8,0,0,1,16.8-.7,9.5,9.5,0,0,1,3.2,7.4,8.8,8.8,0,0,1-1.8,5.7,5.4,5.4,0,0,1-4.3,2.2c-2.1,0-3.1-1-3.2-3.1h-.1c-.7,2.1-2,3.1-3.9,3.1a3.9,3.9,0,0,1-3.1-1.4,5.9,5.9,0,0,1-1.2-3.9,8.6,8.6,0,0,1,1.6-5.4,5.1,5.1,0,0,1,4.2-2.1,3.3,3.3,0,0,1,1.8.5,2.4,2.4,0,0,1,1,1.3h0v-1.6h2.3c-.4,4.7-.7,7.3-.7,7.9s.5,2.6,1.5,2.6a2.7,2.7,0,0,0,2.3-1.6,8.5,8.5,0,0,0,.9-4.2,8.2,8.2,0,0,0-2.3-6.1,9,9,0,0,0-6.5-2.3,9.1,9.1,0,0,0-6.9,2.9,10.1,10.1,0,0,0-2.8,7.2,9.1,9.1,0,0,0,2.5,6.8,9.3,9.3,0,0,0,6.9,2.5,14,14,0,0,0,6-1.2v2.1a15.8,15.8,0,0,1-6.2,1.1,11.6,11.6,0,0,1-8.4-3.1,10.8,10.8,0,0,1-3.2-8.2A12,12,0,0,1,80.2,134ZM61.8,177.6a3.6,3.6,0,0,1-.1-.8v-31l20.1,15.9Zm2.5,1.6h0l22.2-17.7,1.3-.8h1.3l1.3.8,22.2,17.7Zm51-2.3h0a1.9,1.9,0,0,1-.1.8L95.3,161.7l20.1-15.9Zm-26.7-39a2.9,2.9,0,0,0-2.6,1.6,7.3,7.3,0,0,0-1,3.9,4.2,4.2,0,0,0,.7,2.4,2,2,0,0,0,1.8.9A2.8,2.8,0,0,0,90,145a9,9,0,0,0,.9-4.4C90.9,138.8,90.1,137.8,88.6,137.8Z" style="fill: #2b3990"/>
        <!-- <path d="M88,93a63,63,0,0,1,63,63" style="fill: none;stroke: #2b3990;stroke-miterlimit: 10;stroke-width: 5px"/> -->
      </g>
    </g>
    <g id="Step_Submit" data-name="Step Submit">
      <text transform="translate(242.5 411.6)" style="font-size: 18px;fill: #58595b;font-family: Trade Gothic Next W01;">Complete your online application <tspan x="0" y="21.6">and submit with supporting </tspan><tspan x="0" y="43.2">documents at least 10 weeks </tspan><tspan x="0" y="64.8">prior to event start date.</tspan></text>
      <text transform="translate(242.5 378.7)" style="font-size: 36px;fill: #662d91;font-family: Trade Gothic Next W01;font-weight: 900">Submit</text>
    <g id="Arc_Icon_Submit"></g>
      <g id="Icon_Submit" data-name="Icon Submit">
        <!-- <path d="M153.5,349.1a63,63,0,1,1,0,126" style="fill: none;stroke: #662d91;stroke-miterlimit: 10;stroke-width: 5px"/> -->
        <path d="M152.4,412.1l14.7-14.7h-8.4V378.7H146.1v18.6h-8.4Zm-26.9-18.7a1.4,1.4,0,0,1,1.4-1.4h15.8v-5.7H127a7.1,7.1,0,0,0-7.1,7.1v29.3h5.7Zm53.7,0v29.3h5.7V393.4a7.1,7.1,0,0,0-7.1-7.1H162V392h15.8A1.4,1.4,0,0,1,179.3,393.4Zm13.2,32.4h-80c-1.1,0-1.8.7-1.5,2.2,1,3.9,3.9,8.1,9.3,8.1h64.4c5.4,0,8.4-4.2,9.3-8.1C194.3,426.4,193.5,425.7,192.4,425.7Zm-32.7,6.4H145.1a1.3,1.3,0,0,1,0-2.5h14.6a1.3,1.3,0,0,1,0,2.5Z" style="fill: #662d91"/>
      </g>
    </g>
    <g id="Step_Review" data-name="Step Review">
      <text transform="translate(665.9 155)" style="font-size: 18px;fill: #58595b;font-family: Trade Gothic Next W01;">Review of your application proceeds via <tspan x="0" y="21.6">Accreditation Coordinator, then is evaluated </tspan><tspan x="0" y="43.2" xml:space="preserve">by CPD Education Consultants and designated  </tspan><tspan x="0" y="64.8">Peer Reviewers.</tspan></text>
      <text transform="translate(664.5 120.6)" style="font-size: 36px;fill: #ee2a7b;font-family: Trade Gothic Next W01;font-weight: 900">Review</text>
    <g id="Arc_Icon_Review"></g>
      <g id="Icon_Review" data-name="Icon Review">
        <path d="M591.8,168v6.8a2.9,2.9,0,0,1-2.9,2.9h-24v-8.8a5.3,5.3,0,0,0-5.3-5.3h-8.8V128.3a2.9,2.9,0,0,1,2.9-2.9h35.3a2.9,2.9,0,0,1,2.9,2.9v7.9l4.8-4.8v-3.1a7.7,7.7,0,0,0-7.7-7.7H553.7a7.7,7.7,0,0,0-7.7,7.7v37.6a4.7,4.7,0,0,0,1.4,3.4L559.1,181a4.8,4.8,0,0,0,3.4,1.4H589a7.7,7.7,0,0,0,7.7-7.7v-10l-3.2,2.3Zm-.9-23a2,2,0,0,0,2.8,0l10.6-10.6a2,2,0,1,0-2.8-2.8l-10.6,10.6A2,2,0,0,0,590.9,144.9Zm23.9-10.2a6.1,6.1,0,0,0-8.6,0L594.8,146l8.6,8.6,11.3-11.3A6.1,6.1,0,0,0,614.7,134.7ZM589,153.4a24.5,24.5,0,0,0-5.5,9L587,166a23.8,23.8,0,0,0,9-5.5l5.4-5.4-7-7Zm-6.3,15.7,2.8-2.8-2.3-2.3-2.8,2.8a1.7,1.7,0,1,0,2.3,2.3Zm-20.1-32.5h17.3a1.3,1.3,0,1,0,0-2.5H562.6a1.3,1.3,0,1,0,0,2.5Zm0,7.3h17.3a1.3,1.3,0,1,0,0-2.5H562.6a1.3,1.3,0,1,0,0,2.5Zm0,7.3h17.3a1.3,1.3,0,1,0,0-2.5H562.6a1.3,1.3,0,1,0,0,2.5Z" style="fill: #ee2a7b"/>
        <!-- <path d="M574.2,94.1a63,63,0,1,1-63,63" style="fill: none;stroke: #ee2a7b;stroke-miterlimit: 10;stroke-width: 5px"/> -->
      </g>
    </g>
    <g id="Step_Approval" data-name="Step Approval">
      <text transform="translate(728.4 410.8)" style="font-size: 18px;fill: #58595b;font-family: Trade Gothic Next W01;"><tspan>Your program has been approved as a </tspan><tspan x="0" y="21.6">University of Toronto accredited </tspan><tspan x="0" y="43.2">event.</tspan></text>
      <text transform="translate(728.4 377.9)" style="font-size: 36px;fill: #39b54a;font-family: Trade Gothic Next W01;font-weight: 900">Approval</text>
    <g id="Arc_Icon_Approval"></g>
      <g id="Icon_Approval" data-name="Icon Approval">
        <path d="M628.4,436.8l-21.6-33.4,21.6,13.5,42.4-38.2Z" style="fill: #39b54a"/>
        <!-- <circle cx="638.9" cy="411.3" r="63" style="fill: none;stroke: #39b54a;stroke-miterlimit: 10;stroke-width: 5px"/> -->
      </g>
    </g>
  </g>
  <g id="Title">
    <text transform="translate(351.6 47)" style="font-size: 36px;fill: #002453;font-family: Trade Gothic Next W01;font-weight: 900">Four Steps to Accreditation</text>
  </g>
</svg>

svg {
  width: 500px;
}

function createArc(place,level,colour,posit,duration) {
    
  var canvasSize = 160,
      centre = 0,
    percent = level/100,
    radius = canvasSize*0.8/2,
      s = Snap(place),
      path = "",
      arc = s.path(path),
      startY = centre-radius
    endpoint = percent*360;
    

    Snap.animate(0, endpoint, function (val) {
      
          arc.remove();
        var d = val,
            dr = d-90;
            radians = Math.PI*(dr)/180,
            endx = centre + radius*Math.cos(radians),
            endy = centre + radius * Math.sin(radians),
            largeArc = d>180 ? 1 : 0;
            path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy;

        arc = s.path(path);
  
        arc.attr({
          stroke: colour,
          fill: 'none',
          strokeWidth: 10
        });
    arc.transform(posit);

    }, duration, mina.easeinout);
}

createArc('#Arc_Icon_Request',25,"#2b3990","t88,155",1000); 
createArc('#Arc_Icon_Submit',50,"#662d91","t153,412",2500);
createArc('#Arc_Icon_Review',75,"#ee2a7b","t575,155",4000);
createArc('#Arc_Icon_Approval',100,"#39b54a","t637,412",5000);