Record animated SVG on websites (animated by lottie and similar tools)

animated-svg-recorder.js

let recordedChanges = []
let startRecordingSVG = () => { recordedChanges = [] }
let stopRecordingSVG = () => { console.log(JSON.stringify(recordedChanges)) }

let observer = new MutationObserver(mutationRecords => {
    for(const record of mutationRecords) {
        if(record.attributeName === 'd') {
            recordedChanges.push(record.target.getAttribute('d'))
        }
    }
})

observer.observe($0, {
  subtree: true,
  attributes: true
})

/* USAGE */
// 1. Select target svg (or better it's parent, because svg may be overwritten) in Elements panel
// 2. Paste this into Console
// 3. Paste startRecordingSVG() into console
// 4. Do something so animation plays
// 5. Paste stopRecordingSVG() into console
// 6. An array with all animation keyframes will be printed in JSON format, use it to transform to lottie animation or CSS keyframes

array-frames-to-CSS-keyframes.js

function arrayFramesToCSSKeyframes(array) {
    let frames = '', i = 0
    for(let framePath of array) {
        const percentage = i/(array.length-1)*100
        const frameCode = []
        frames += `  ${Math.round(percentage)}% {\n`
        frames += `    d: path("${framePath}");\n`
        frames += `  }\n\n`
        i++
    }
    return `@keyframes frames {\n${frames}\n}`
}