Crescent Moon Shape#

This recipe explains how to combine formulas and paths to create a dynamic shape in Kustom

Step 1: Create a new Shape Module#

In your Kustom editor, create a new Shape module. You can do this by:

1. Tapping the “+” button
2. Selecting “Shape”

In the shape module, select “Path” as the shape type. This will allow you to define a custom shape using SVG path commands.

Step 2: Define the Path#

Here comes the crucial part. You need to define the path that forms the shape of the crescent moon. Given Kustom’s viewport of 100x100, we can use the following path:

Shapes path#

From version 3.73 onwards users can use custom SVG paths in Shapes, just add a Shape module and select “Path” as type. This powerful feature allows creating your own shapes while maintaining all the great functionalities of Shapes, such as gradients, masks, and bitmaps. Furthermore, formulas can be used inside the path definition, offering even more customization options! You could use this to generate a graph for example.