Cry

<svg width="300" height="300">
<defs>

<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>

<mask id="mouth">
<ellipse cx="150" cy="300" fill="#fff" rx="20" ry="20">
<animate attributename="rx" begin="start.mousedown" dur="5s" repeatcount="indefinite" values="50;40;50;20;50"/>
<animate attributename="ry" begin="start.mousedown" dur="4s" repeatcount="indefinite" values="30;40;20;40;30"/>
</ellipse>
</mask>

<mask id="eyes">
<g transform="rotate(20 100 230)">
<ellipse cx="100" cy="230" fill="#fff" rx="12" ry="22"/>
</g>
<g transform="rotate(-20 200 230)">
<ellipse cx="200" cy="230" fill="#fff" rx="12" ry="22"/>
</g>
</mask>

<mask id="bub">
<ellipse cx="150" cy="50" rx="130" ry="40" fill="#fff">
</ellipse>
</mask>

</defs>
<rect width="300" height="300" fill="royalblue"/>



<g>
<circle fill="salmon" r="20" cx="80" cy="250"/>
<circle fill="#000" r="12" cx="80" cy="250" opacity="0.5"/>
<circle fill="salmon" r="20" cx="220" cy="250"/>
<circle fill="#000" r="12" cx="220" cy="250" opacity="0.5"/>
<ellipse cx="150" cy="300" fill="salmon" rx="80" ry="140"/>

<g opacity="0">
<rect width="15" height="100" fill="cyan" x="88" y="245"/>
<rect opacity="0.5" width="15" height="5" fill="white" x="88" y="245">
<animate attributename="y" begin="0s" dur="0.4s" repeatcount="indefinite" values="245;300"/>
</rect>
<rect width="15" height="100" fill="cyan" x="198" y="245"/>
<rect opacity="0.5" width="15" height="5" fill="white" x="198" y="245">
<animate attributename="y" begin="0s" dur="0.4s" repeatcount="indefinite" values="245;300"/>
</rect>
<animate attributename="opacity" begin="start.mousedown" dur="2s" fill="freeze" values="0;1"/>
</g>

<g transform="rotate(20 100 230)">
<ellipse cx="100" cy="230" fill="#000" rx="16" ry="26" opacity="0.5"/>
<ellipse cx="100" cy="230" fill="#fff" rx="12" ry="22"/>
<g transform="translate(-3 -1)">
<ellipse cx="100" cy="230" fill="#192e85" rx="8" ry="18"/>
<ellipse cx="100" cy="230" fill="#000" rx="3" ry="8"/>
<ellipse cx="96" cy="225" fill="#fff" rx="2" ry="5"/>
</g>
</g>

<g transform="rotate(-20 200 230)">
<ellipse cx="200" cy="230" fill="black" rx="16" ry="26" opacity="0.5"/>
<ellipse cx="200" cy="230" fill="#fff" rx="12" ry="22"/>
<g transform="translate(3 -1)">
<ellipse cx="200" cy="230" fill="#192e85" rx="8" ry="18"/>
<ellipse cx="200" cy="230" fill="black" rx="3" ry="8"/>
<ellipse cx="204" cy="225" fill="#fff" rx="2" ry="5"/>
</g>
</g>

<g style="mask:url(#mouth)">
<ellipse cx="150" cy="300" fill="#934747" rx="50" ry="50"/>
<ellipse cx="150" cy="300" fill="#000" rx="30" ry="30" opacity="0.3"/>
<ellipse cx="150" cy="300" fill="#000" rx="20" ry="20" opacity="0.3"/>
<ellipse cx="150" cy="320" fill="red" rx="40" ry="30"/>
<ellipse cx="110" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="120" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="130" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="140" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="150" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="160" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="170" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="180" cy="270" fill="#fff" rx="5" ry="10"/>
<ellipse cx="190" cy="270" fill="#fff" rx="5" ry="10"/>
</g>
<ellipse cx="150" cy="250" fill="#000" rx="10" ry="2" opacity="0.5"/>

<g style="mask:url(#eyes)">
<rect fill="salmon" width="200" height="100" x="50" y="108">
<animate attributename="y" begin="0s;blink.end+3s" dur="0.5s" repeatcount="1" values="108;158;108;108;158;108" id="blink"/>
</rect>
</g>
<animatetransform attributename="transform" attributetype="xml" type="rotate" values="0 150 300; 10 150 300;0 150 300;-10 150 300;0 150 300" begin="start.mousedown" dur="6s" repeatcount="indefinite"/>

<rect x="90" y="192" width="30" height="10" rx="5" fill="brown">
<animatetransform attributename="transform" attributetype="xml" type="rotate" values="0 90 192; -20 90 192" begin="start.mousedown" dur="2s" fill="freeze"/>
</rect>
<rect x="180" y="192" width="30" height="10" rx="5" fill="brown">
<animatetransform attributename="transform" attributetype="xml" type="rotate" values="0 210 192; 20 210 192" begin="start.mousedown" dur="2s" fill="freeze"/>
</rect>
<animatetransform attributename="transform" attributetype="xml" type="translate" values="0 0; 0 200" begin="full.end+6s" dur="12s" fill="freeze" id="dead"/>
</g>

<g>
<circle r="10" fill="none" stroke="white" stroke-width="2" cx="150" cy="312"/>
<circle r="5" fill="none" stroke="white" stroke-width="2" cx="140" cy="330"/>
<circle r="8" fill="none" stroke="white" stroke-width="2" cx="160" cy="340"/>
<circle r="4" fill="none" stroke="white" stroke-width="2" cx="150" cy="355"/>
<animatemotion begin="full.end;up.end" end="dead.end" dur="6s" values="0,0;0,-360" id="up"/>
</g>

<rect x="0" y="300" width="300" height="300" fill="cyan" opacity="0.4">
<animate attributename="y" begin="start.mousedown+6s" dur="12s" fill="freeze" values="300;0" id="full"/>
</rect>

<rect x="0" y="0" width="300" height="300" opacity="0" id="start"/>
</svg>