how to separate svg defs from the tags?

[wizardnet972]

In my codepen example I have two svgs.

I want to move all the defs into separate svg tag like so:

<svg>
 <defs>
  <pattern id="a" ......... />
  <pattern id="b" ......... />
 </defs>
</svg>

and in the tags to do:

<svg>
 <path fill="url(#a)" d="M................................. />
</svg>

<svg>
 <path fill="url(#b)" d="M................................. />
</svg>

The problem is the image is not fill right.

So how to do that?

https://codepen.io/shlomilevi/pen/OQpoEY

[Author]

Posts