Problem with SVG path

[swent]

Hey,

I have a div containing a H1 element and it is the root of my Brushstroke. So besides the H1 it will create the canvas element under the same div.

I had problems using the points-array to draw simple lines, so I moved to svg path. After also encountering problems with the path, I inserted an additional svg element drawing the same path:

Here is a page screenshot how the elements overlay:

Without masking:

The red lines are from pure svg path element. The light blue is from Brushstroke.

You can see the bottom line is broken into two parts and the others are diagonal instead of horizontal (like the red).

The used path string is: M50 24 L304 24 M50 73 L304 73 M50 122 L304 122 z

I have fiddled around with the options with no luck, it is still likely that this problem is due to my configuration:

const brushStrokeOptions = {
    animation: 'path',
    frames: 17,
    frameAnimation: true,
    queue: false,
    color: '#B8D3DF',
    delay: 0.13,
    inkAmount: 1.3,
    splashing: true,
    lifting: false,
    size: 39.2,
    width: 354,
    height: 147,
};

...

tb.brushStroke.init(tb.brushOptions);
tb.brushStroke.draw({
    path: path,
});

Please advice.

[lmgonzalves]

Please provide a jsfiddle or Codepen demo, so I can take a look?