All shapes are SVG based, for each shape the transformation parameters are available to control your drawing.
SVG & Viewbox
It is the element/viewport that collects your design.
Basically it’s a svg included in the page, rate width and height are the viewbox values.
The available parameters are:
- Rate W/H
- Outer visibility (overflow)
For each drawing you can check the type of shape, its characteristics, animations and if it has the background image.
The parameters for the creation and transformation of the shape
Looping and entry animations to create moving scenes
Optionally fill the shape with an image
Svg-shapes creates a composable SVG element from elements of your choice to create vector compositions directly in Elementor.
The shapes available are:
The basic forms.
- Polygon (corners)
- Spiral (tips)
- Wave (frequency)
- Blob (points and tension)
- Custom path
The tools to manage:
- Group (to collect multiple elements and transform them as if they were one)
- Use (uses an existing element while modifying the visual characteristics)
Shapes type & properties
Style & Transformation
For each element you can define: colors, thickness, shape, hatch, position, rotation, scale and blanding.
The key features of each shape are:
- Color of fill
- Color of stroke
- Stroke size
Bland mode: To blend the underlying elements.
Each shape is placed by default in the center of the viewport / svg.
You can move it, rotate it and scale it to shape your composition.
- X (+-)
- Y (+-)
- Rotation (+-)
Values can be negative to go left or positive to right.
Hatching is available for the trace, which is made up of 2 full/empty values.
Linecap: is the type of end in case of open line or hatch.
Linejoin: is the type of shape for the corners.
No scaling: avoids the transformation of the stroke even if scaled.
The Text Path
The track animates and draws the shape.
If the repeat value is 0 it will be infinite.
Yoyo: produces the design in both directions.
Line fill Options:
- 0 = start
- 100 = end
Note: Better if the filler is empty.
Infinite animations or for a specific repeat value.
There are 8 possibilities:
- Passes Through
The parameters are duration, delay and easing.
- Transform origin
The transform origin defines the anchor point of animation. Default is center
Ease is the speed variation curve, which allows you to create different styles of movement such as elastic, bounce etc.
Blob & Wave
In the case of Blob and Wave, an animation specifically dedicated to the type of shape is added:
- Blob creates a distortion
- Wave sways
Entrance animations automatically snap to the visibility trigger.
You can create your scene by composing the transformations between 5 properties:
- Horizontal movement
- Vertical movement
- Scale in or out
- Rotation clockwise and counterclockwise
Amount movement: is the amount of shift based on the coefficient, from 0.1 to 2 where 1 is normal.
The svg allow you to apply an image as a fill, this is basically a repetition pattern, you see how you prefer to use it.
The available parameters are:
- The dimension
- The horizontal and vertical repetition coefficient.