Usage

Here's what it looks like:

studiousDoodle({
    d: 'M0,200 L280 0 320 60 0 600',
    head: {
        elem: 'circle',
        fill: 'white',
        r: 5
    },
    tail: {
        fill: 'none',
        stroke: 'white',
        'stroke-width': 1,
        'stroke-dasharray': 4
    }
});

Try on Codepen

Properties Overview

| Property | Required | Description | Default | |---------------|----------|------------------------------|--------------------------| | d | Yes | path d attribute | none | | svg | No | svg container css selector | first svg element in DOM | | speed | No | speed of animation | see default marker options | | head | No | head svg element and attributes | see default marker options | | tail | No | tail svg attributes | see default marker options | | onEnd | No | on end callback | noop |
| onStart | No | on start callback | noop |

Default marker options

    {
        speed: 3, 
        head: {
            elem: 'circle', // any svg element
            fill: 'black',
            r: 2
        },
        tail: { // path by default, not customizable
            fill: 'none',
            stroke: 'black',
            'stroke-dasharray': 3
        }
    }