mercredi 5 septembre 2018

Thoughts

<svg width="300" height="300">
<defs>
<mask id="teeth">
<ellipse cx="150" cy="300" fill="#fff" rx="50" ry="40">
<animate attributename="rx" begin="0s" dur="2s" repeatcount="indefinite" values="50;40;50;0;50"/>
<animate attributename="ry" begin="0s" dur="2s" repeatcount="indefinite" values="30;40;20;40;30"/>
</ellipse>
</mask>
</defs>
<rect width="300" height="300" fill="royalblue"/>
<ellipse cx="150" cy="50" rx="150" ry="50" fill="#fff">
<animate attributename="rx" begin="0s" dur="2s" repeatcount="indefinite" values="150;140;150"/>
<animate attributename="ry" begin="0s" dur="2s" repeatcount="indefinite" values="40;50;40"/>
</ellipse>
<circle r="20" cx="250" cy="80" fill="#fff"/>
<circle r="15" cx="220" cy="120" fill="#fff"/>
<circle r="10" cx="180" cy="150" fill="#fff"/>
<ellipse cx="150" cy="300" fill="salmon" rx="80" ry="140"/>
<g transform="rotate(20 100 230)">
<ellipse cx="100" cy="230" fill="black" rx="14" ry="24" opacity="0.5"/>
<g>
<ellipse cx="100" cy="230" fill="#fff" rx="12" ry="22"/>
<ellipse cx="100" cy="230" fill="#192e85" rx="8" ry="18"/>
<ellipse cx="100" cy="230" fill="black" rx="3" ry="8"/>
<ellipse cx="96" cy="225" fill="#fff" rx="2" ry="5"/>
<animatemotion>
</g>
</g>
<g transform="rotate(-20 200 230)">
<ellipse cx="200" cy="230" fill="black" rx="14" ry="24" opacity="0.5"/>
<ellipse cx="200" cy="230" fill="#fff" rx="12" ry="22"/>
<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 style="mask:url(#teeth)">
<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>
</svg>