About The Project

A lightweight and customizable 3D animated butterfly component built with pure HTML, CSS, and SVG. This component provides a beautiful, floating butterfly animation that can be easily integrated into any web page to add a touch of dynamic flair and visual interest. The design is modular, allowing for seamless replacement of the central SVG element, making it highly versatile for various creative uses.

Installation

Run this demo on a local server.

Customization

The animation's core properties can be easily customized using data- attributes on the custom-butterfly-animation element. This allows you to control the animation's timing directly from your HTML without touching the CSS.

• data-top: Sets the vertical position offset from the center of scene.

  • Value: A CSS length value (e.g., "-150px", "10vh").

  • Default: 0px.

• data-left: Sets the horizontal position offset from the center of scene.

  • Value: A CSS length value (e.g., "-150px", "10vh").

  • Default: 0px.

• data-main-animation-duration: Controls the duration of the main floating and rotating animation.

  • Value: A CSS time value (e.g., "5s", "15s").

  • Default: 4s.

• data-wing-animation-duration: Sets the duration for the wing flapping animation.

  • Value: A CSS time value (e.g., "0.75s", "0.2s").

  • Default: .45s

• data-fill-color: Sets the fill color for the inner SVG.

  • Value: A CSS color value (e.g., "red", "#FF5733").

  • Default: (Inherits from CSS)

• data-stroke-color: Sets the stroke (outline) color for the inner SVG.

  • Value: A CSS color value (e.g., "black", "rgba(0, 0, 0, 0.5)").

  • Default: (Inherits from CSS)

• dev: A boolean attribute to enable a debug mode (e.g., for showing bounding boxes).

  • Value: Present or absent (e.g., <... dev>).

Preview

Contact

Author: [email protected]

Demo Link: https://github.com/JeromeJoh/it-gives-you-butterflies

License

MIT