Breakdance Builder - Custom Shape Dividers on the Section Element

Step 1: Create your path

The first step is to create your path. You can do this in whatever vector illustration program you prefer – in this case I’m using Adobe Illustrator, but any app should work, as long as it can export SVG!

Create your artboard at a minimum of 1920 pixels wide, the height of your artboard can be flexible. Let your artwork decide what the height should be, but remember to trim your artboard height to be as tight as possible once you’re ready to export. As you can see above I used a bright magenta for my fill colour; but later we’ll allow Breakdance to set the colour of our path.

Tip: Extend your path outside of the artboard just a small amount. This ensures that there’s no hairline visible on the edges of your SVG.

Note: Your SVG can be much more complex than I have shown here, but get comfortable with the basics first – then work on some more advanced stuff!

Step 2: Export and ‘Compress’

Export your artwork to an SVG file. At this stage Breakdance will not accept your SVG, so we have a bit of work to do.

First is to ‘Compress’ or ‘Minimize’ the SVG file. To do this, use one of the following services:

1. https://vecta.io/nano
2. https://svgomg.net/

Either one will do the trick. Upload your SVG file, and download it again. You’ll get a slightly different file that’s just the bare-bones, and this is ideal for Breakdance.

Step 3: Preparation for Breakdance Builder

Now that you have your minimized SVG file, there’s a bit of XML work to do. Open your SVG file in a text editor – something like Sublime Text – and do the following:

1. Locate your <path> element, and find the fill attribute if one exists. If it does, delete it.
2. Locate your <path> element, and find the style attribute, change it to read style="fill:currentColor". This will ensure that you can use Breakdance to modify the colour of your SVG.
3. Optional: Set whether or not Breakdance should respect the aspect ratio of your SVG. Note that by default Breakdance assumes you DO want to preserve the aspect ratio. If you do NOT want this, locate your <svg> element, and add the attribute: preserveAspectRatio="none"
4. Optional: Set whether or not Breakdance should crop your SVG as the viewport changes. By default Breakdance assumes you do NOT want this. To enable it locate your <svg> element, and add the attribute: preserveAspectRatio="xMidYMin slice"

You’re now ready to paste your SVG into Breakdance!

Below is the pasteable SVG code for the mountain range pictured above – feel free to try it out:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 128" style="enable-background:new 0 0 1920 128;" xml:space="preserve" preserveAspectRatio="none"><path d="M27.5,118.5C36,113,40,96,49,88s27.9-27,27.9-27L104,23l16,5l21.5,22.5c0,0,15.4,10.5,25.4,10.5c10.1,0,29.6-28.5,29.6-28.5L233,9l11.1,7.6L251,14l26.5,25.5c0,0,15.7,25.6,23.1,30.6S319,83,329.5,80.5s27-30,27-30l7.7-6.2L369,34l4.2,3l9.3-7.5l19,31.5l23,19.5c0,0,18.5,12.5,33,13C463.4,93.7,480,78,480,78l19.7-7.9L522,29l15.9-15.5l25.6,37c0,0,6.1,10.5,15.3,10.5c9.2,0,44.7-12.5,44.7-12.5l37.2-35l25.8,23c0,0,22.5,45.5,30,53c4.1,4.1,17.2,10.3,28.2,15.1c2.2,0.9,10.3-1.6,10.3-1.6l15,7l20.5-7.5L825.7,61l24.8,15.5L862,70c0,0,21,24,25.5,25.5S913,61,913,61l5-13l11.5-14.5L942,42l14-18l23.8,46.1c0,0,35.2,18.9,44.7,18.4s63-44,63-44L1103,39l9.5,15.5l28,24c0,0,20.5-5.4,27.5-8.4c7-3.1,23-27.1,23-27.1l26.5-43.5L1257,9l19,17l20,10l15-9c0,0,56,53,64.5,54.5s24-31,24-31s17.9,11.6,25.5,14.5s37.5,12.5,37.5,12.5L1477,55l36-26l9.5,23.5L1533,71l34.5-27.5l26-23c0,0,23.7,34.5,34.1,40.5s28.9,17.5,28.9,17.5l17,15L1687,61l23-27l19,10l17-14l22,24l23.5,24.5L1818,83l12-30l28,32l16-39l14-19l30,45l8,59H6C6,131,19,124,27.5,118.5z" style="fill:currentColor"/></svg>

Step 4: Add your new SVG into Breakdance

Copy your SVG code in its entirety, and paste it into Breakdance. You’ll have to set your orientation, colour, and other settings, but you should see your custom shape divider just as you envisioned it!