API

SVG styler

The SVG styler replaces the confusing SVG transformation model with the CSS model and provides a simple API for path drawing.

const pathStyler = styler(document.getElementByTag('path'))

pathStyler.set({ pathLength: 50 })

Path drawing

Line drawing the process of using an SVG path element and its stroke-dasharray and stoke-dashoffset properties to emulate a pen drawing a line. This blog post explains the effect in more detail.

Stylefire supports both'stoke-dasharray' and stroke-dashorigin properties, but also provides:

  • pathLength
  • pathSpacing
  • pathOffset

These are all set as a progress of the total path length, from 0 to 1, which is automatically measured by Stylefire.

So you can define an animation from 0 to 1:

import { tween } from 'popmotion';
import styler from 'stylefire';

const path = document.querySelector('path');
const pathStyler = styler(polygon);

tween({ to: 1 }).start(
  v => pathStyler.set('pathLength', v)
);

In this example you can change the real path shape and length without having to update the animation.

Props

Supported props

All SVG attributes are supported. x and y attributes can be accessed via attrX and attrY.

The following transform props are supported:

  • rotate: degrees
  • rotateX: degrees
  • rotateY: degrees
  • scale: scale
  • scaleX: scale
  • scaleY: scale
  • skewX: degrees
  • skewY: degrees
  • translateX: px
  • translateY: px
  • translateZ: px
  • perspective: px

Prop types

For convenience and safety, many props are mapped to value types for safety and convenience.

  • fill: color
  • stroke: color
  • x/y: px
  • scale: scale
  • scaleX: scale
  • scaleY: scale
  • opacity: alpha
  • fillOpacity: alpha
  • strokeOpacity: alpha