Animate shape in typography mask SVG - svg

Question

For my new website, I want to mask a morphing shape inside a typography like clip path property. I have done the morphing but not the mask, any idea ?
I put 2 photos of my example and a jsFiddle.
My Example :
jsFiddle exemple : http://jsfiddle.net/aw8zvsbn/32/
s = Snap(1000, 500);
s.attr('fill', 'red');
s.attr({ viewBox: "80 230 340 100" });
var path = s.path("m238 324c-19.4 0.618-33.4-27.3-47.6-37-8.27-5.66-35.8-21.4-28.5-35 2.51-4.67 18.8-4.3 22.4-5.5 11.4-3.83 15.8-10.8 25.8-16.6 29.7-17.2 32.2 14.8 58.1 11.5 8.36-1.06 13.3-11.8 21.4-14.3 10.6-3.22 20.8 1.61 31 5.74 18.4 7.48 25.4 13.8 13.5 36.2-12.2 22.9-27.6 9.32-43.3 23.5-7.57 6.78-7.33 16.8-16 23-9 7-26 9-37 9-12 0 15 0 0 0z");
path.animate({ d: "m187 302c-13.3-0.667-12.9 9.71-27.5-0.5-9.9-6.91-6.5-13.6-3-28.2 3-15-12-37 3-44 11.1-5.07 35 16.9 54 20s26.4-20 45.2-17.2 11.1 15.4 34.3 16.8c20.6 1.2 60.8-0.555 55.7 22.7-6.36 29-44 23-61.7 33.5-10.3 6.1-25-13.4-33.2-6-10.3 9.38-21.3 14.2-33.3 15.2s-21-12-34-13z" }, 6000, mina.linear);
Any help would be precious.
Sorry for my english, I'm French

Answer 1

You just mask the animated blob with some <text>.
Plain SVG example below. I'll let you translate it to a Snap script.
<svg viewBox="80 230 340 100">
<defs>
<!-- some text we will use for masking the red blob,
and also for the green text in the background.
We define it here once so we don't have to repeat it twice. -->
<g id="mytext" font-size="50" font-family="sans-serif" font-weight="bold">
<text x="100" y="270">CLOTHING</text>
<text x="150" y="310">BRAND</text>
</g>
<!-- Define the mask that we will use to show only part of the red blob -->
<mask id="textmask">
<use xlink:href="#mytext" fill="white"/>
</mask>
</defs>
<!-- Display an instance of the text in green -->
<use xlink:href="#mytext" fill="limegreen"/>
<!-- The red blob masked with our text mask -->
<path d="M187,302C173.7,301.333,174.1,311.71,159.5,301.5C149.6,294.59,153,287.9,156.5,273.3C159.5,258.3,144.5,236.3,159.5,229.3C170.6,224.23000000000002,194.5,246.20000000000002,213.5,249.3C232.5,252.4,239.9,229.3,258.7,232.10000000000002C277.5,234.90000000000003,269.8,247.50000000000003,293,248.90000000000003C313.6,250.10000000000002,353.8,248.34500000000003,348.7,271.6C342.34,300.6,304.7,294.6,287,305.1C276.7,311.20000000000005,262,291.70000000000005,253.8,299.1C243.5,308.48,232.5,313.3,220.5,314.3C208.5,315.3,199.5,302.3,186.5,301.3C186.5,301.3,187,302,187,302C187,302,187,302,187,302" fill="#ff0000" mask="url(#textmask)"></path>
</svg>