Negative scale on SVG Bezier curve not working

Im trying to make a logo in SVG, and for that purpose, I need to do mirroring. Im using negative scale transformation on my path, but when I do it simply disappear ...

<svg  width="1024" height="1024">\
    <g transform="scale(.5)">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:white;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)"  stroke="#89898C" stroke-width="4" />

            <path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)"  transform="translate(200, 0) scale(-1, 1)" />
        </g>
    </svg>

Here js fiddle : https://jsfiddle.net/5bbd4r12/

I tried some other examples and it seems to work with non cubic curves ...

Thanks for the help, i'm kinda pulling my hair off on this one haha

Solution

It's off the canvas (too far to the left) so you can't see it. I've increased the translate so you can see it.

<svg  width="1024" height="1024">
    <g transform="scale(.5)">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#FDDAC2;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#F7984F;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="10%" style="stop-color:#e8e8e8;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:white;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M220 130 C 570 190, 530 250, 430 620 C 500 270, 420 190, 220 130 Z" fill="url(#grad2)"  stroke="#89898C" stroke-width="4" />

            <path d="M220 130 C 570 190, 530 250, 430 620, C 500 270, 420 190, 220 130 Z" stroke="#89898C" stroke-width="4" fill="url(#grad2)"  transform="translate(450, 0) scale(-1, 1)" />
        </g>
    </svg>