Colors are flexible and defined by CSS class, important things to note about use are:
- You have to define
SVG { width: 100% }
(or explicitly define any SVG tag width) - The
.anim-main
class needsfill
andstroke
values for color. - There are masking shapes at play in the wrench,
.anim-mask
, which should have afill
the same color as your background (can't be transparent). - The Blue and Yellow variations' main class is
anim-color
instead ofanim-main
. This is all commented in thestyle.css
sheet. - If you're confused about vanilla JS use (instead of a Vue context), see examples and documentation on the main lottie page here.