No notes defined.
<div class="grid">
<div class="col-1/4@tablet">
<div class="pie-chart">
<svg width="100%" height="100%" class="pie">
<circle class="circle-1" r="50" cx="100" cy="100" style="stroke-dasharray: 59.85 315;"></circle>
<circle class="circle-2" r="50" cx="100" cy="100" style="stroke-dasharray: 255.15 315; stroke-dashoffset: -59.85;"></circle>
<circle class="circle-3" r="50" cx="100" cy="100" style="stroke-dasharray: 0 315; stroke-dashoffset: -315;"></circle>
</svg>
</div>
</div>
<div class="col-3/4@tablet">
<div class="pie-chart_key">
<span class="key-color key-1"></span>
<span class="key-label"><strong>19%</strong> of time in lectures, seminars or similar</span>
</div>
<div class="pie-chart_key">
<span class="key-color key-2"></span>
<span class="key-label"><strong>81%</strong> of time in independent study</span>
</div>
<div class="pie-chart_key">
<span class="key-color key-3"></span>
<span class="key-label"><strong>0%</strong> of time in work based learning</span>
</div>
</div>
</div>
<div class="grid">
<div class="col-1/4@tablet">
<div class="pie-chart">
<svg width="100%" height="100%" class="pie">
<circle class="circle-1" r="50" cx="100" cy="100" style="stroke-dasharray: 59.85 315;"></circle>
<circle class="circle-2" r="50" cx="100" cy="100" style="stroke-dasharray: 255.15 315; stroke-dashoffset: -59.85;"></circle>
<circle class="circle-3" r="50" cx="100" cy="100" style="stroke-dasharray: 0 315; stroke-dashoffset: -315;"></circle>
</svg>
</div>
</div>
<div class="col-3/4@tablet">
<div class="pie-chart_key">
<span class="key-color key-1"></span>
<span class="key-label"><strong>19%</strong> of time in lectures, seminars or similar</span>
</div>
<div class="pie-chart_key">
<span class="key-color key-2"></span>
<span class="key-label"><strong>81%</strong> of time in independent study</span>
</div>
<div class="pie-chart_key">
<span class="key-color key-3"></span>
<span class="key-label"><strong>0%</strong> of time in work based learning</span>
</div>
</div>
</div>
.pie-chart {
.pie { transform: rotate(-90deg); width: 200px; height: 200px; background: #F4F4F4; border-radius: 50%; margin-bottom: 2rem; }
.pie circle { fill: none; stroke: #F4F4F4; stroke-width: 99; -webkit-animation: rotate 1.5s ease-in; animation: rotate 1.5s ease-in; }
.pie .circle-1 { stroke: #D20052; }
.pie .circle-2 { stroke: #394851; }
.pie .circle-3 { stroke: #C3C1C1; }
&_key {
margin: 0.5rem 0;
& .key-color { display: inline-block; width: 17px; height: 17px; margin-right: 0.5rem; }
& .key-color.key-1 { background: #D20052; }
& .key-color.key-2 { background: #394851; }
& .key-color.key-3 { background: #C3C1C1; }
}
}