TUTORIALS

Changing The Color Of An Element

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.

Creating a Pattern

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.

Modifying an element's stroke

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.

Creating a Clipping Mask

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.

Creating a Clipping Path

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!

How To Group Elements

Active the selection tool (V) then press and hold "Ctrl" and select all the elements, then group all the checked elements.

Animators and keyframes

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.

Creating Looping Animations

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.

Creating Interactive Animations

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.

Adding Events

To trigger animations based on events like mouseover, mouse click, or mouse leave, select the element that will listen for the event then right-click on the element to choose the desired event.

Each event that is set is represented by an arrow, indicating the targeted frame.

Adding Actions

CSSVG offers various actions for frames, such as play, play alternative (play and reverse the animation), stop, and hide. After selecting an event, you can choose the appropriate action to accompany it.

Hiding Frames

Hiding elements on events, You can set an event and set the action to hide, that way your frame won't be visible after that event occurs.

Hiding elements by default, if you set the frame to be "Hidden by Default" it won't be visible when the design loads but you can play it by assigning it to an event on another frame.

Unleashing creativity with multiple events and actions

CSSVG encourages experimentation by allowing you to set different events on a single element or apply different actions on a single frame. This flexibility empowers you to bring your creative ideas to life by combining events and actions in unique ways.

Assign different actions to a certain event or different events to an element.