AnimatedLineDrawingProps

Props for AnimatedLineDrawing

Hierarchy

AnimatedLineDrawingProps

Index

Properties

animation

animation: AnimationStrategy

The rules to describe how quickly this component should animate.

Optional bare

bare: undefined | false | true

If true, do not render a wrapping svg

Optional className

className: undefined | string

Class applies to the <svg> element rendered, if applicable

d

d: string

Defines the path to be drawn.

This is the same as the d property on an SVG <path> element. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

Optional delayRatio

delayRatio: undefined | number

Percentage delay between segments.

This is the percentage of the time spent animating that should be reserved between the path's M commands. If 0 (the default), all time will be spent drawing. If 0.1, 90% of the time will be spent drawing, and 10% of the time will be spent waiting between segments.

Optional desc

desc: undefined | string

A string describing the line drawing in more detail, for screenreaders.

Set this property if the line animation is complex and meaningful, and "title" cannot fully explain the line drawing.

Optional pathClassName

pathClassName: undefined | string

Class applied to the <path> element this component renders.

pathStyle

pathStyle: CSSProperties

CSS styles for <path> elements that will be drawn.

Keep in mind the following gotchas:

AnimatedLineDrawing animates using stroke-dasharray and stroke-dashoffset, so you can't specify those properties here.
AnimatedLineDrawing may render multiple paths for a single path you passed in. Specifically, it renders a seperate path for every M command in the path. This style applies to all these paths.

title

title: string | null

A string for hovertext and screenreaders.

If this animated line should not be visible to screenreaders, pass null instead.