Choose a layout
Font family

Lines

A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app

Report an Issue

Table of contents

PR

Installation

To install, just include the following JavaScript somewhere on your page: 

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>


<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/bg-lines.iife.js"
></script>

Important notes

  • Make sure your project is using either Frankenstyle or FrankenstyleKit.
  • The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
  • When using multiple Frankternity components, the core file only needs to be loaded once.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

Prop NameTypeDefaultDescription
classNamestringAdditional CSS classes to be applied to the outer container.
stlobject{}Additional inline styles to be applied to the outer container.
svgOptionsobject{ duration: 10 }Options for customizing the SVG animation.