How can i animate a "blob" made with svg using dynamics.js

[static phoenix]

Hi @formal pendant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details on how to animate an SVG blob using dynamics.js. However, I can suggest that you refer to the official documentation of dynamics.js and Next.js for more detailed guidance.

For SVG animations, you might also want to consider using React libraries that are designed for this purpose, such as react-spring or framer-motion.

Remember to ensure that any dynamic imports are handled correctly in Next.js. You can refer to the Next.js documentation on dynamic imports (https://nextjs.org/docs/advanced-features/dynamic-import) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@formal pendant kapa.ai is still learning and improving, please let us know how it did by reacting below

[formal pendant]

I want to use https://www.npmjs.com/package/dynamics.js to animate a "blob" svg based, this is my code but it doesnt work

'use client'

import generator from 'blobshape'
import dynamics from 'dynamics.js'
import Image from 'next/image'
import { useEffect, useState } from 'react'

import Navbar from '@/components/navbar'
import Borders from '@/components/borders'
import Photo from '@@/../public/mw-logo.svg'

const size = 500
const animationConfig = {
    type: dynamics.spring,
    frequency: 200,
    friction: 100,
    duration: 1200
}

export default function Home() {
    useEffect(() => {
        const animate = (path: string) => {
            const element = document.getElementById('blobSvg')
            if (!element) return
    
            dynamics.animate(element, { d: path }, animationConfig)
        }

        const [svgPath, setSvgPath] = useState(
            generator({ size, growth: 8, edges: 12 }).path
        )

        animate(svgPath)

        setInterval(() => {
            setSvgPath(generator({ size, growth: 8, edges: 12 }).path)
            animate(svgPath)
        }, 7000)
    })

    return (
        <div className='relative h-full w-full bg-black-mw'>
            <Navbar />

            <div className='flex absolute top-48 left-52 h-[30rem] w-[30rem] justify-center items-center'>
                <svg
                    className='absolute h-[30rem] w-[30rem]'
                    viewBox={`0 0 ${size} ${size}`}
                    xmlns='http://www.w3.org/2000/svg'
                    xmlnsXlink='http://www.w3.org/1999/xlink'
                    width='100%'
                    id='blobSvg'
                >
                    <path id='blob' d={svgPath} fill='#e6e7ee' />
                </svg>
                <div className='absolute h-96 w-96'>
                    <Image src={Photo} alt='mw-logo-big' />
                </div>
            </div>
            </div>
)
}

@static phoenix

[static phoenix]

Let me check the knowledge base for you. One moment! :books: