jeudi 31 mai 2018
Shhhhhhh ...
<svg width="400" height="400">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="fuzz">
<feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
</filter>
<mask id="rev1">
<circle cx="200" cy="350" r="0" fill="white" filter="url(#fuzz)">
<animate attributename="r" begin="up1.end" dur="6s" fill="freeze" values="0;200"/>
</circle>
</mask>
<mask id="rev2">
<circle cx="200" cy="195" r="0" fill="white" filter="url(#fuzz)">
<animate attributename="r" begin="up1.end" dur="6s" fill="freeze" values="0;200"/>
</circle>
</mask>
</defs>
<rect width="400" height="400"/>
<circle cx="150" cy="100" r="40" fill="white"/>
<circle cx="150" cy="100" r="10" fill="black"/>
<rect width="10" height="10" x="150" y="90" fill="white"/>
<circle cx="250" cy="100" r="40" fill="white"/>
<circle cx="250" cy="100" r="10" fill="black"/>
<rect width="10" height="10" x="250" y="90" fill="white"/>
<rect x="100" y="60" height="40" width="200" fill="black">
<animate attributename="y" begin="start.mousedown" id="open" dur="2s" values="60;20" fill="freeze"/>
</rect>
<rect x="100" y="100" height="40" width="200" fill="black">
<animate attributename="y" begin="start.mousedown" id="open" dur="2s" values="100;140" fill="freeze"/>
</rect>
<g mask="url(#rev2)">
<path d="m125.96,161.96c0,0 6.39,-5.81 6.39,-5.81c2.17,-0.9 3.99,0.7 4.03,2.91c0.05,3.02 -3.32,5.45 -3.11,8.94c0.36,6.24 11.68,12.42 16.73,14.89c27.83,13.63 57.91,15.29 86,1.45c8.61,-4.24 17.32,-9.43 23,-17.34c-3.67,-2.29 -3.89,-2.85 -5,-7c11.94,1.27 8.95,7.87 21,9c0,0 0,5 0,5c-3.12,-0.26 -8.41,-1.7 -11,-0.99c-3.25,0.89 -8.97,5.83 -12,7.95c-6.56,4.61 -13.6,8.59 -21,11.71c-17.05,7.18 -30.06,5.36 -48,5.33c-11.77,-0.02 -29.67,-6.31 -40,-12.03c-7.22,-4 -12.38,-11.56 -18,-13.35c-2.95,-0.93 -10.82,0.53 -14,1.38c0,0 0,-6 0,-6c6.02,-0.34 10.23,-2.29 14.96,-6.04z" fill="dimgray"/>
</g>
<g transform="translate(0 230)">
<path d="m217.55,179.02c0,0 5.68,26.98 5.68,26.98c0,0 4.77,20 4.77,20c4.47,15.01 7.41,18.1 8.49,35c0.28,4.38 -1.18,17.39 -3.5,20.9c-4.17,6.32 -22.68,11.18 -29.99,10.72c-8.18,-0.51 -12.77,-5.27 -17,-6.02c-4.82,-0.86 -9.52,4.36 -17.9,-2.24c-4.44,-3.5 -8.53,-12.73 -9.13,-18.36c-0.09,-2.83 0.78,-6.64 0,-8.91c-1.26,-2.73 -7.68,-7.59 -10.12,-15.09c-2.35,-7.21 -0.73,-16.65 8.15,-17.66c4.39,-0.49 6.64,1.48 10,0.98c4.09,-0.61 4.47,-3.1 12,-3.22c0,0 6,0 6,0c4.34,0.61 8.11,2.97 10.29,1.12c3.25,-2.54 0.27,-10.74 0,-14.22c-1.28,-10.44 -4.17,-29.26 6.73,-35.26c6.32,-1.54 12.16,-1.1 15.53,5.28z" fill="grey"/>
<path id="svg_1" d="m210,170.92c1.44,0.24 3.41,0.64 4.67,1.39c2.39,1.42 5.26,5.34 6.1,8.02c0,0 0.35,3 0.35,3c0,0 0.78,3 0.78,3c0,0 0.2,3 0.2,3c0,0 0.93,5 0.93,5c0,0 0,2.67 0,2.67c0,0 1.69,6 1.69,6c0,0 0.4,2.33 0.4,2.33c0,0 1.65,6 1.65,6c0,0 0.4,2.67 0.4,2.67c0,0 1.66,6.67 1.66,6.67c0,0 0.29,2 0.29,2c0,0 2.08,7 2.08,7c0.56,1.69 1.49,2.27 2.48,5.33c0,0 0.44,2.33 0.44,2.33c0,0 1.07,4 1.07,4c0,0 1.56,4.67 1.56,4.67c0.98,3.76 1.43,9.41 1.6,13.33c0,0 0.29,3.67 0.29,3.67c0,0 -0.28,2.33 -0.28,2.33c0,0 -0.43,6 -0.43,6c0,0 -0.59,2.67 -0.59,2.67c-0.75,4.64 0.09,4.41 -2.4,9c-1.88,3.47 -4.67,4.48 -7.94,6.15c0,0 -6.67,2.71 -6.67,2.71c0,0 -5.33,0.96 -5.33,0.96c0,0 -3,0.95 -3,0.95c-4.86,1.08 -10.14,1.29 -15,0c-1.93,-0.43 -6.2,-2.72 -8,-3.79c-1,-0.6 -2.24,-1.65 -3.33,-1.88c-1.81,-0.37 -3.38,0.92 -5,1.51c-1.42,0.51 -2.86,0.39 -4.34,0.39c-2.93,0 -2.15,-0.09 -4.66,-1.14c-6.12,-2.55 -8.11,-5.44 -10.97,-11.19c-1.48,-2.99 -0.91,-1.07 -2.06,-4.67c-1,-3.11 -1.63,-3.96 -1.64,-7.33c0,0 0,-3.34 0,-3.34c0,-1.16 0.62,-4.31 0.31,-4.9c-0.34,-0.65 -1.98,-1.82 -2.63,-2.46c0,0 -3.8,-4.64 -3.8,-4.64c-1.59,-2.13 -3.89,-6.46 -4.65,-9c-0.27,-0.87 -0.21,-1.76 -0.33,-2.66c0,0 -0.37,-3 -0.37,-3c0,0 0.37,-2.34 0.37,-2.34c0,0 0.23,-2 0.23,-2c0.5,-2.32 2.35,-5.51 4.22,-6.98c2.24,-1.77 8.2,-2.81 10.98,-2.22c1.43,0.3 3.98,1.74 5.34,1.66c0.97,-0.05 4.41,-2.45 5.66,-3.08c1.48,-0.74 4.95,-1.02 6.67,-1.04c2.7,-0.03 7.11,0.26 9.67,1c1.04,0.3 4.86,1.83 5.58,1.67c0.95,-0.21 0.82,-1.28 0.79,-2.01c-0.12,-3.09 -0.42,-2.54 -0.92,-5c0,0 -0.92,-5.33 -0.92,-5.33c0,0 -0.26,-3.67 -0.26,-3.67c0,0 -0.94,-16 -0.94,-16c0.01,-3.4 0.41,-2.58 0.85,-5.33c0,0 0.26,-2.67 0.26,-2.67c0.5,-2.85 2.2,-6.56 4.31,-8.54c2.17,-2.02 5.1,-2.7 7.91,-3.3c1.73,-0.2 2.98,0.14 4.67,0.43zm-8.97,5.89c-2.4,1.96 -3.99,7.48 -4.03,10.52c0,0 0,15.34 0,15.34c0.01,3.62 0.97,7.13 1.64,10.66c0,0 0.72,5.34 0.72,5.34c0.3,1.82 0.4,4.52 1.5,5.98c1.02,1.37 3.31,2.72 3.7,3.74c0.33,0.86 -0.25,1.62 -0.91,2.12c-1.77,1.33 -4.94,-0.82 -6.65,-1.63c-4.66,-2.2 -11.51,-4.87 -16.67,-4.88c-2.14,0 -4.32,0.04 -6.33,0.9c-1.17,0.5 -2.2,1.61 -3.14,2.47c-4.76,4.36 -5.75,7.47 -4.17,13.63c0.56,2.19 -0.07,4.84 1.19,5.65c0.85,0.55 2,-0.29 3.45,-0.54c0,0 8,-0.44 8,-0.44c0,0 5,0.33 5,0.33c1.08,0 3.42,-0.11 4.34,0.25c0.97,0.37 2.36,1.54 2.08,2.72c-0.21,0.89 -1.24,1.45 -2.08,1.55c0,0 -6.67,-0.52 -6.67,-0.52c-5.53,-0.01 -10.73,-0.68 -15.33,3.16c-1.14,0.95 -1.92,2.05 -2.73,3.27c-3.35,5 -3,8.81 -1.21,14.24c1.02,3.09 1.52,4.21 3.33,7c1.93,2.99 2.65,4.44 5.94,6.28c0.85,0.47 2.08,1.08 3,1.37c1.3,0.4 6.32,0.41 5.76,-1.9c-0.14,-0.57 -1.18,-1.58 -1.59,-2.09c-0.82,-1.05 -1.46,-2.09 -1.94,-3.33c-0.49,-1.27 -1,-2.47 0.18,-3.56c0.46,-0.42 0.97,-0.62 1.59,-0.53c2.07,0.27 2.32,3.31 5.29,6.28c0,0 4.06,3.92 4.06,3.92c3,2.41 9.44,5.84 13.32,5.89c0,0 4.66,0 4.66,0c2.85,-0.04 5.6,-1.21 8.34,-1.82c0,0 2.66,-0.35 2.66,-0.35c3.06,-0.62 2.62,-0.81 5,-1.68c3.51,-1.28 7.06,-2.82 9.14,-6.15c0.88,-1.4 1.41,-6.21 1.56,-8c0,0 0.54,-3.33 0.54,-3.33c0,0 0.43,-7 0.43,-7c0,0 -0.91,-8.67 -0.91,-8.67c0,0 -0.26,-3.67 -0.26,-3.67c-0.85,-3.99 -2.56,-9.16 -4.03,-13c0,0 -1.48,-3.66 -1.48,-3.66c0,0 -0.58,-2.34 -0.58,-2.34c0,0 -1.34,-4 -1.34,-4c0,0 -2.25,-9 -2.25,-9c0,0 -0.25,-3.33 -0.25,-3.33c0,0 -1.28,-6 -1.28,-6c0,0 -1.05,-8.67 -1.05,-8.67c-0.77,-4.97 -1.84,-9.86 -3.29,-14.66c0,0 -0.55,-2.34 -0.55,-2.34c-0.5,-1.39 -2.92,-4.94 -4.09,-5.76c-1.64,-1.14 -5.31,-1.7 -7.31,-1.45c-1.3,0.34 -3.27,0.84 -4.3,1.69zm-43.7,50.19c-7.64,0.1 -8.17,9.16 -6.08,14.67c0.62,1.61 1.88,3.55 2.84,5c1.22,1.85 2.52,3.69 4.19,5.17c0.75,0.66 1.56,1.39 2.52,0.62c0.31,-0.25 0.66,-0.8 0.89,-1.13c0.5,-0.73 1.01,-1.46 1.21,-2.33c0.63,-2.8 -1.32,-8.92 -1.54,-12c-0.25,-3.59 1.03,-5.52 2.31,-8.67c-2.55,-1.24 -3.56,-1.37 -6.34,-1.33z" fill="#272727"/>
<animateMotion begin="open.end" fill="freeze" dur="6s" values="0,0;0,-230" id="up1"/>
</g>
<g mask="url(#rev1)">
<text style="fill:grey;font-family:arial;font-size:40" x="100" y="350">Shhhhhhh ...</text>
</g>
<rect width="400" height="400" opacity="0" id="start">
<animate attributename="x" begin="start.mousedown" dur="1ms" values="400" fill="freeze"/>
</rect>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate