Pie componentAvailable since EcoComposer 2.0

Complex method with "clip-path", transforms and classic gradients

"conic-gradient" method

font-size : 16px, text : 'true', suffix : '', themes : ( light : ( ), dark : ( ) )

We can implement it that way :

@include pie.init-classic; // only for classic pie, not conic ones @include pie.create( ( 'themes' : $themes, 'slices' : ( ( 'value' : 10, 'radial-gradient' : #f00, 'color' : #fff ), ( 'value' : 25, 'radial-gradient' : #0f0 ), ( 'value' : 15, 'radial-gradient' : #00f, 'color' : #fff ), ( 'value' : 20, 'radial-gradient' : #0aa, 'color' : #fff ), ( 'value' : 30, 'radial-gradient' : #aaf ) ) ) );

We can implement it that way :

<div class="pie suffix"> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> </div>
^