Premium element

Visual Effect

SVG Color

SVG Color adds a captivating effect to your logo, changing its colors when a specific element, like a menu button, is clicked. This animation can switch between solid colors or a smooth gradient.

Preview

Quick Setup

data-animated-logo=true

Required

Enables the SVG Color Animation on the SVG logo.

data-logo-color-trigger=true

Required

Specifies the trigger element that will activate the color change.

Advanced configuration

data-animation-duration

Optional

Sets the duration of the color transition.

Default: 300

data-color-type

Optional

Selects between solid or gradient color changes.

Default: solid

data-target-color

Optional

Specifies the color to change to when using solid color type.

Default: #FFFFFF

data-gradient-colors

Optional

Specifies the gradient colors when using gradient color type.

Default: #FFFFFF, #000000

data-gradient-angle

Optional

Sets the angle of the gradient.

Default: 45

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours