CSS Helpers

Trigger

.svg-trigger

Used to assign to an HTML element the hover of the child SVG animation. For example :

<a class="svg-trigger">
    <div>
        <svg>...</svg>
    </div>
</a>

Themes

Colors depend on themes. For example :

<svg class="svg-theme-dark">
    <path class="svg-fill-primary" d="..."></path>
    <path class="svg-fill-secondary" d="..."></path>
</svg>

.svg-fill-primary

Fill primary colors with current theme.

.svg-fill-secondary

Fill secondary colors with current theme.

.svg-fill-tertiary

Fill tertiary colors with current theme.

.svg-stroke-primary

Stroke primary colors with current theme.

.svg-stroke-secondary

Stroke secondary colors with current theme.

.svg-stroke-tertiary

Stroke tertiary colors with current theme.

Builders

.svg-builder-basic

This class need to be encapsulated by .svg-trigger

This class is parent of 2 children with id :

• on-start

• on-hover

This class manage opacity according to hover event.

.svg-builder-circle

This class need to be encapsulated by .svg-trigger

This class need to be assign to a <circle>

This class increases radius from 0 to 100 on hover event.