Dashed Lines limitations

[handrawn]

pity about the tendancy of art brush to produce clipped bitmaps pretending to be lines, real disapointment when they came out...

[Acorn]

@handrawn, I agree but that the limitation we have.

If you have a Plus product then enable Shapes as SVG.

At its simplest add this into Page Body code: <style> svg path { stroke-dasharray: 5 8 2 11 9 4; } </style>
Draw some QuickShapes or freehand blobs, add a Line width and colour and Preview.

The stroke-dasharray can be as simple as 5, which will produce a line of 5 and a gap of 5.

To be really precise, you need to match pathlength to be the same as the Perimeter of your Shape and an integer multiple of your stroke-dasharray.

The result is pure SVG but only works for

Look at https://yuanchuan.dev/fun-with-stroke-dasharray for examples.

In practical use, you would have the CSS target specific ClassNamed objects.

SVG Dashes.xar

Acorn

[handrawn]

actually I got it to work in a way:

test brush.xar

but it's flakey, once I got a 'failed to set up bitmap rendering' message, once it defaulted to creating bitmap after reopening the file; it works in ver 20 but not in earlier versions - so whether it will work for you i don't know

I read the help and made sure my lines, created with sraight line tool, were more than 36px ie 48px

EDIT just read your last post - not beihg difficult but is any of that of use outside of a website ?

[Acorn]

actually I got it to work in a way:

test brush.xar
EDIT just read your last post - not beihg difficult but is any of that of use outside of a website ?

The generated output is an SVG, so you could include it in a design. An SVG is a mini drawing area that will scale without jaggies. The bitmap Xara generates are at best 192dpi so fairly rubbish for scaling and printing. I would never just create a logo as a bitmap for a client.

Acorn

[handrawn]

good to know thanks; one day I may have time to play with xara svgs

[Egg Bramhill]

Fun to mess around with Acorn.

[Acorn]

Fun to mess around with Acorn.

Cheers, wait to you see how to animate along the path.

Acorn

[Egg Bramhill]

Cheated here Acorn. Pinched the code from your link & messed about with it

[Acorn]

Cheated here Acorn. Pinched the code from your link & messed about with it

Egg, you did a good job.

I was tinkering with similar but adding the animation component in as CSS @keyframes, which are far more flexible and, to me, understandable.

I hadn't thought of putting the SVG image in as a Placeholder.

Anyhow, all good.
I did force the Placeholders to Regenerate and I added a 40% Transparency, allowing a better understanding of placement.

Acorn

[Egg Bramhill]

Cheers Acorn, I went on a bit and animated a line. I wanted to try it on an arc but couldn't so I cheated and hid the bottom of an oval with a section of the background photo.