Shapes

Client only

Multiple shapes to use as separators for sections or as background images.


Curves

Smooth curves that can be used at the top, bottom or right side of an element. Use text color utilities to control their coloring.

...
...
...
...
...
...

Wave

Wave shape that can be used at the top of an element.

...

Angles

Angle shapes that can be used at the top, right, bottom, and left sides of an element.

...
...
...
...

Blurs

Blur shapes that can be used as background images for elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.


Creating New Shapes

You can create new shapes easily by exporting an SVG from your preferred editor (Sketch, Figma, etc.), but you will have to make a handful of modifications for the shape to work:

  • Remove the width and height attributes
  • Add preserveAspectRatio="none" to the top level svg element
  • Replace all fill values that aren't "none" with "currentColor"

A few other important things to note...

  • Make sure your vector points line up on whole pixels in your design tool
  • Make sure your Artboard/Frame is setup on whole pixels