Is pop-out effect using blob svg achievable?

I’m quite struggling with this one. I found an article with this: https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/ , I alredy tried the steps. The problem is that I’m using blob as the maskBackground, I’m having some problems with the paths. I wanted to achieve the pop-out effect using the svg I have.

Here’s my svg:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
</svg>

Here’s the full svg:

    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
        <defs>
            <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
                <path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
              </clipPath>
            <clipPath id="maskBackground" clipPathUnits="userSpaceOnUse">
              <path d="M39.6,-48.8C49.4,-47.4,54,-33.2,58.1,-19.2C62.2,-5.2,65.8,8.7,63.6,22.3C61.5,36,53.6,49.4,42,59.4C30.4,69.3,15.2,75.8,3.8,70.6C-7.7,65.4,-15.3,48.5,-30.9,39.9C-46.5,31.2,-70.1,30.8,-72.1,23.6C-74.2,16.4,-54.8,2.5,-46.1,-12.1C-37.4,-26.7,-39.4,-41.8,-33.5,-44.5C-27.6,-47.1,-13.8,-37.3,0.6,-38.1C14.9,-38.9,29.8,-50.2,39.6,-48.8Z" transform="translate(100 100)" />
            </clipPath>
          </defs>
        <g clip-path="url(#maskImage)" transform="translate(0 -7)">
            <!-- Background image -->
            <image clip-path="url(#maskBackground)" width="120" height="120" x="70" y="38" href="./resources/images/blob.svg" transform="translate(-90 -31)" />
        <!-- Foreground image -->
        <image width="120" height="144" x="-15" y="0" fill="none" class="image__foreground" href="./resources/images/dog.png" />
        </g>
</svg>

You need to sign in to view this answers