Select an element and on the right side of the app go to the Fill section, you'll find a range of options: Color picker, Linear gradient, Radial gradient, Fill with pattern and Eye-dropper.
You can play around with the gradients by adding more breaking points and assigning different colors to each. It's as simple as clicking the "Add Stop" button to create color transitions.
Select the element and use the "Fill with Pattern" option. Then, choose the element that will repeat as a pattern to fill the other element.
The pattern will seamlessly repeat across the selected element, adding depth and visual interest to your design.
You can modify the element's pattern by scrolling down to the pattern's width and height.
You can easily adjust the stroke's color, transparency, width, line-ends, and the stroke pattern.
Whether you're working with rectangles, circles, lines, paths, or text, CSSVG allows you to customize the stroke to suit your creative vision. Play around with the Stroke-linecap and Stroke-Linejoin properties to achieve different line endings and corner styles.
Want a sharp 90-degree angle? Go for "Butt." Need to extend the stroke beyond the length of the path? Choose "Square." And for a smoother look, opt for "Round".
You can modify the stroke pattern (Stroke and Gap) and animate the stroke dash-offset.
To create a clipping mask, select the element you want to mask, click on the "Clipping Mask" button and then choose the element that will act as the mask.
You can even animate the masked elements for added visual effects.
To create a clipping path, select the element to be clipped and click on the "Clipping path" button and then select the clipping path element. And yes, you can animate the clipped elements too!
Active the selection tool (V) then press and hold "Ctrl" and select all the elements, then group all the checked elements.
Select the element you want to animate and set the property you want to animate. Before adding keyframes, set the desired ease to create smoother and more enjoyable animations. Note that you cannot add a keyframe behind existing keyframes.
With the "Add Keyframe" button, you can start animating the element. CSSVG allows animation of properties such as position, morph, fill, strokes, opacity, and rotation.
Start by adding animations and press "Copy Frame" then "New Frame" and paste the frame.
Select the composition and on the top-right side of the app, set the animation duration and repeat count.
After creating your frames, press on the "Interactions" button. Here you will see all the frames you created, this is where you will be able to set which elements will listen out to certain events and which action must be triggered after the event occurs.
Let's Create this simple interactive heart animation which basically switches between two frames.