Examples

SVG path animation

page.tsx
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
import { Animatable } from '@infinityfx/lively';

export default function Page() {

    return <svg viewBox="0 0 100 100" width={300} fill="none" strokeWidth={2.5}>
        <Animatable animate={{ strokeLength: [0, 1] }} triggers={[{ on: 'mount' }]}>
            <circle cy={50} cx={50} r={45} strokeLinecap="round" stroke="var(--clr-accent)" />
        </Animatable>
    </svg>;
}