Create a cool shape with your favorite vector tool, and save it in SVG format.
Be sure to only use the black color (with or without transparency). If we use other colors, we won't be able to change them in Breakdance.
Go to this website and drop your SVG file in order to optimize it. Then press the Copy button, to copy the full (optimized) code:
In your desired Section element, go to the Dividers section and add a new one.
Select Custom shape and paste your freshly copied code.
Here is our custom shape in action:
Pretty weird, right? Not only it's upside down but changing the color doesn't have any effect.
Let's fix the color
We must add this attribute or we won't be able to change the color : fill="currentColor"
So the code will look like this:
Here is our custom shape in white...but still upside down!!!
Different settings for different behaviors
Now we have to fix the position!
Here are several method to do it. They all have different behaviors when you resize the window, so feel free to pick up the one that works the best for you.
Method 1 : Always the same shape
If we want to keep the exact same shape, whatever the size of the section, we simply have to set the height to auto :
The shape will keep his former size and will never be deformed, even when resized.
Method 2 : deformed shape
By adding the attribute preserveAspectRatio="none" , we will be able to set a custom height.
Which also means that the shape will be "deformed" to keep the same height.
Note that it's the current settings of all the available presets.
Method 3 : Cropped shape
And finally, with the attribute preserveAspectRatio="xMidYMin slice" , we will be able to set a custom height, but this time, the shape will keep his aspect ratio and won't be deformed but cropped.