Get Elements Hive

SVG Path Drawer

The SVG Path Drawer draws you SVG files based on the chosen settings. It’s a versatile element that can turn your SVG files into interactive design elements,  storytelling elements, or UI elements that enhance the UX.

 

Special Notes:

  • The element works with stroke-based SVG files only! Fill colors cannot be drawn and as such are not supported.
  • The SVG <text> primitives are not supported and should be converted into <path> primitives before uploading the file. In Figma, you can use the ‘Flatten’ function to turn an SVG primitive into a <path>

 

Content Tab

  • SVG: The SVG file

 

Design Tab

SVG

  • Width: SVG size
  • Override Stroke Color: Override the default stroke color
  • Stroke Color: The new stroke color
  • Override Stroke Width: Override the default stroke width
  • Stroke Width: The new stroke width

 

Animation Trigger 

  • Trigger: Whether to draw the SVG when it enters the screen ( Entrance Animation ) or as the user scrolls ( Scroll Animation )
    • Use as Page Progress: A shortcut helper to use the SVG as a custom page progress indicator.
    • Relative to: The element to use for the scroll animation
    • Trigger Location: The start and end locations of the scroll animation
    • Draw Mode: Whether to draw the SVG when scrolling down, up, or in both directions
    • Run Once: Whether to run the draw animation only once
    • Show Debug Markers: Show debug marker to help with positioning the trigger location

 

Animation

  • Animation Type: The type of drawing animation. You will only see a difference when your SVG is made up of more than one primitive.
    • Delayed: Each primitive in the SVG has a small delay applied to it
    • Synchronized: All primitives in the SVG are drawn at the same time
    • One by One: The primitives in the SVG are drawn sequentially