Create a custom stroke with an exact pattern of many different square and rectangular dashes

by

Can anyone suggest a method that will essentially allow me to use the pattern shown in the below image as a stroke? I want to be able to apply this to any path, and want to ensure that the each component/dash will remain as it is in the image; that the squares, for example, will remain perfect squares and exactly the same size as they appear in the below image? At corners, either overlaps or a specific shape will be fine, as long as they retain visual consistency.

Pattern to use as stroke

I have tried Art and Pattern and Scatter brushes, but each of these in some way or another manipulates or stretches the pattern; in line with the previous example, a square will either get bigger or smaller, or become a rectangle.

Answer

Is this the sort of result you’re looking for?

enter image description here

If it’s not and you need no curved segments at all, ever, even on curved lines, you’ll need to just do something like this as a guide then place and rotate the rectangular segments over it by hand.

If this is what you want, you can exceed Illustrator’s dash-gap-dash-gap-dash-gap maximum (with some compromises) by saving as SVG from Illustrator, then hacking the SVG. Full steps below.

But first, be aware that with this approach:

  • You lose any features Illustrator can’t convert to SVG. There aren’t many, but some complex effects like blends or raster effects may break or cause the file size to balloon absurdly.
  • You can’t edit the doc in Illustrator after applying this pattern. I’d recommend applying this when finishing the file – if you need any further file conversion or finishing, an SVG-based editor like Inkscape (free and open source) is your friend.

Here’s how to do it:

  • Prepare your shapes in Illustrator. Give them a solid stroke, no dots or dashes at all else Illustrator will muck up the SVG. Tip: making anything you can into a compound path (object > compound path) will make the next steps slightly easier. For example, all the lines above making the second Hello are combined into one compound path.
  • Save as SVG
  • Open the SVG in a plain text editor / code editor. There are thousands of free ones, or you can use Windows Notepad or Mac TextEdit (but first set TextEdit to plain text mode before opening any file), or even Dreamweaver if you have it…

  • Add something like this to each <path you want to have this pattern:

    stroke-dasharray="2 1 4 1 5 1 3 1 5 1 2 1 4 1 1 1 3 1 1 1"

The numbers define the pattern and are relative to the stroke width – so if you want a stroke width of two, for example, double all the numbers (4 2 8...). It’s length of dash, length of gap, length of dash, length of gap, repeat.

Then open it in something that can read SVG (e.g. a web browser)

Here’s how the code behind the above example looks after adding the stroke-dasharrays:

enter image description here

Attribution
Source : Link , Question Author : TPLD , Answer Author : user56reinstatemonica8

Leave a Comment