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>

Solution

You have 2 identical clipPath You need just one. You can apply the clipPath as many times as you need.
you are clipping a group and then the image inside. Why?
you have many transform translate. You are translating to and fro paths and image and group.

In the next example I'm simplifying your code.

I keep only one clipPath,
I've deleted the group
I've deleted all the transformations and I'm translating only the clipped image.

In order to know the size of the bounding box of the path used for the clipping I'm using the getBBox() method. This is giving me

"x": -72.25780487060547,
"y": -48.919960021972656,
"width": 136.5255584716797,
"height": 121.35723876953125

The image should be the same size or bigger. In this case I'm using an image width="200" height="252".

Since the path used for clipping has "x": -72.25780487060547 and "y": -48.919960021972656, I'm giving the image a negative x and y similar to the x and y of the bounding box of the clipping path.

It helps, as a debugging method, to to draw the clipping path over the image. This would help you visualize the result you intend to achieve.

Finally, after clipping, I'm translating the image where I intend it to be.

//console.log(m.getBBox())

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="image">
        <defs>
            <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
                <path id="m" 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"  />
              </clipPath>
          </defs>
 
            <!-- Background image -->
            <image clip-path="url(#maskImage)" width="200" height="252" x="-73" y="-49" href="https://assets.codepen.io/222579/imgres.jpg" transform="translate(100 50)" />
        
</svg>