Pie componentAvailable since EcoComposer 2.0

Pie examples
Default SCSS values
SCSS implementation
HTML implementation

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>