The shape function

Creates a Shape when passed one or more Plain Shape Object.


shape(plainShapeObject1, plainShapeObject2, ..., options)

Arguments

plainShapeObject1, plainShapeObject2, ...

A list of one or more Plain Shape Object. Each Plain Shape Object will create a Keyframe.

A Plain Shape Object can also be created on the fly by passing a DOM node as the el property. For example, the following two Shapes could be identicle:


const shape1 = shape({ type: 'circle', cx: 10, cy: 10, r: 5, fill: 'yellow' })
const shape2 = shape({ el: document.querySelector('circle') })

options (optional)

An object, where:

  • name (optional) is a string or number.
  • replace (optional) is a DOM node to be replaced when this Shape is rendered.

Return value

A Shape.

Lesson: Create a shapeNext up: The render function