title: SVG path d: I expected ('M' or 'm'), but got "NaN 0,0..100"
body: <p>I used [<strong>skylake</strong>] library == <strong>svg morphing animation menu</strong> and wanted to do the same menu animation(svg morphing animation) like this one : <a href="http://jemimahbarnett.com" rel="nofollow noreferrer">http://jemimahbarnett.com</a> . When your mouse entered the svg menu is opened &amp;&amp; closed when your mouse left. I did it but in my chrome console I got:
  <code>Error: &lt;path&gt; attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".</code></p>
  
  <p>how to solve it correctly?. There, is the <code>morph.js</code> instruction's file for the animation menu with svg path:</p>
  
  <p><a href="https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js" rel="nofollow noreferrer">https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js</a></p>
  
  <p>and here is how I used it in my project:</p>
  
  <pre class="lang-js prettyprint-override"><code>import S from 'skylake'
  
  class HomeSvg {
    constructor() {
      S.BindMaker(this, ["menuOpen", "menuClose"])
    }
    init(t) {
      this.first = !1
      this.listeners("add")
    }
    listeners(t) {
      S.Listen("#nav-link-submenu", t, "mouseenter", this.menuOpen)
      S.Listen("#nav-link-submenu", t, "mouseleave", this.menuClose)
    }
    menuOpen(t) {
      this.first = !0
      this.isOver = !0
      S.Geb.id("nav-container").className = "active"
      this.isOver &amp;&amp; !this.isAnimated &amp;&amp; this.open()
    }
    menuClose(t) {
      this.first &amp;&amp; (this.isOver = !1, S.Geb.id("nav-container").className = "", this.isOver || this.isAnimated || this.close())
    }
    open(t) {
      let i = this
      function s() {
        i.morph1Animation = new S.Morph({
          type: "path",
          element: S.Geb.id("nav-morph-path"),
          end: "M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z",
          duration: 600,
          ease: "ExpoOut",
          callback: t =&gt; {
            i.isAnimated = !1
            i.isOver || i.close()
          }
        })
        i.morph1Animation.play()
      }
      this.isAnimated = !0
      S.Geb.id("nav-wrap").className = "active"
      S.Geb.id("nav-morph-path").setAttribute("d", "M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z")
      this.morphAnimation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z",
        duration: 300,
        ease: "Power3In",
        callback: s
      })
      const tl = new S.Timeline()
      tl.from("#nav-submenu-extend-bottom", "3dy", -200, 0)
      tl.from("#nav-submenu-extend-left", "3dy", -200, 0)
      tl.from(".nav-submenu-link-title", "3dy", -100, 0, 500, "Power4Out", {delay: 400})
      tl.from(".nav-submenu-link-no", "opacity", -100, 0, 500, "Power4Out", {delay: 50})
      tl.play()
      this.morphAnimation.play()
    }
  
    close(t) {
      let i = this
      function s() {
        i.morph3Animation = new S.Morph({
          type: "path",
          element: S.Geb.id("nav-morph-path"),
          end: "M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z",
          duration: 600,
          ease: "ExpoOut",
          callback: t =&gt; {
            i.isAnimated = !1
            i.isOver &amp;&amp; i.open()
          }
        })
        i.morph3Animation.play()
      }
      this.isAnimated = !0
      S.Geb.id("nav-wrap").className = ""
      S.Geb.id("nav-morph-path").setAttribute("d", "M 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,0 Z")
      this.morph2Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z",
        duration: 300,
        ease: "Power3In",
        callback: s
      })
      const tl = new S.Timeline()
      tl.from("#nav-submenu-extend-left", "3dy", 0, -200)
      tl.from(".nav-submenu-link-title", "3dy", 0, -100, 160, "Power2In")
      tl.from(".nav-submenu-link-no", "3dy", 0, -100, 160, "Power2In")
      tl.from("#nav-submenu-extend-bottom", "3dy", 0, -200, {delay: 160})
      tl.play()
      this.morph2Animation.play()
    }
  
    destroy(t) {
      // console.log(homesticky.destroy)
      this.listeners("remove")
      this.morphAnimation &amp;&amp; this.morphAnimation.pause()
      this.morph1Animation &amp;&amp; this.morph1Animation.pause()
      this.morph2Animation &amp;&amp; this.morph2Animation.pause()
      this.morph3Animation &amp;&amp; this.morph3Animation.pause()
    }
  }
  
  
  let homesvg = new HomeSvg()
  homesvg.init()
  export default HomeSvg
  </code></pre>