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:
- Tapping the “+” button
- 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:
M 50,50 m -25,0 a 25,25 0 1,0 50,0 a 25,$ai(mill)$ 0 1,0 -50,0 Z
This will start at the center of the viewport (50,50), move 25 units to the left, then draw two arcs to form the crescent shape. The $ai(mill)$ is the current moon fill percentage, which will control the size of the inner arc, giving us a dynamic crescent shape that changes with the moon phase. We add a “Z” at the end to fully close the path.
Step 3: Style Your Crescent Shape #
You can now style your crescent shape as desired. You can change the color, add a stroke, adjust the opacity, and more.
And there you have it! You’ve created a dynamic crescent moon shape in Kustom. Happy customizing!