import { compile, morph } from 'svg-path-morph'


// Get the d attributes of the <path> elements you want to morph between
const happy = document.getElemenyById('happy').getAttribute('d')
const angry = document.getElemenyById('angry').getAttribute('d')

// Compile the morph base (average path embedding)
const compiled = compile([ 
  happy, 
  angry 
])

// Morph between the happy/angry faces
const slightlyAngry = morph(
  compiled,
  [
    0.80,  // 80% happy
    0.20   // 20% angry
  ]
)

// Use the face is the d attribute of a <path> element
document.getElementById('the-face').setAttribute('d', slightlyAngry)