samedi 8 septembre 2018
Korrigan
<svg width="300" height="300">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="2" in="SourceGraphic"/>
</filter>
<mask id="frown">
<circle fill="#FCF3CF" r="15" cx="130" cy="145"/>
<circle fill="#FCF3CF" r="15" cx="170" cy="145"/>
</mask>
</defs>
//background
<rect fill="black" width="300" height="300"/>
<g transform="translate(0,230)">
//habits
<ellipse cx="150" cy="350" fill="#993300" rx="50" ry="150"/>
<ellipse cx="150" cy="220" fill="#000" rx="20" ry="30" opacity="0.5"/>
//left ear
<ellipse fill="#1F618D" rx="10" ry="50" cx="100" cy="120" transform="rotate(-10 100 120)"/>
<ellipse fill="#000" rx="4.5" ry="30" cx="98" cy="120" transform="rotate(-10 100 120)" opacity="0.5"/>
<circle cx="105" cy="160" r="10" fill="#1F618D"/>
//right ear
<ellipse fill="#1F618D" rx="10" ry="50" cx="200" cy="120" transform="rotate(10 200 120)"/>
<ellipse fill="#000" rx="4.5" ry="30" cx="202" cy="120" transform="rotate(10 200 120)" opacity="0.5"/>
<circle cx="195" cy="160" r="10" fill="#1F618D"/>
<circle cx="195" cy="170" r="8" fill="none" stroke="gold" stroke-width="2"/>
//face
<circle fill="#1F618D" r="10" cx="150" cy="240"/>
<rect fill="#1F618D" width="20" height="50" x="140" y="190"/>
<circle fill="#000" r="50" cx="150" cy="150" filter="url(#blur)"/>
<circle fill="#1F618D" r="50" cx="150" cy="150"/>
<ellipse fill="#000" rx="30" ry="30" cx="150" cy="200" filter="url(#blur)" opacity="0.5"/>
<ellipse fill="#1F618D" rx="30" ry="40" cx="150" cy="180"/>
//left eye
<circle fill="#000" r="24" cx="125" cy="137" filter="url(#blur)"/>
<circle fill="#1F618D" r="26" cx="125" cy="140"/>
<circle fill="#000" r="20" cx="125" cy="140" opacity="0.5"/>
<circle fill="#FCF3CF" r="14" cx="130" cy="145"/>
//right eye
<circle fill="#000" r="24" cx="175" cy="137" filter="url(#blur)"/>
<circle fill="#1F618D" r="26" cx="175" cy="140"/>
<circle fill="#000" r="20" cx="175" cy="140" opacity="0.5"/>
<circle fill="#FCF3CF" r="14" cx="170" cy="145" opacity="1"/>
<g>
<circle fill="salmon" r="3" cx="130" cy="145"/>
<circle fill="#000" r="2" cx="130" cy="145"/>
<circle fill="salmon" r="3" cx="170" cy="145" opacity="1"/>
<circle fill="#000" r="2" cx="170" cy="145" opacity="1"/>
<animateMotion begin="0s" dur="6s" repeatCount="indefinite" values="-8,0;0,5;8,0;5,0;-8,0"/>
</g>
<path d="m110,130L150,150L190,130z" fill="#1F618D" style="mask:url(#frown)">
<animateMotion begin="0s" dur="2s" repeatCount="indefinite" values="0,-5;0,0;0,-5"/>
</path>
//mouth
<ellipse cx="140" cy="200" rx="5" ry="10" fill="#FCF3CF"/>
<ellipse cx="150" cy="204" rx="5" ry="10" fill="#FCF3CF"/>
<ellipse cx="160" cy="200" rx="5" ry="10" fill="#FCF3CF"/>
<path d="m130,190 C 130,200 140,210 150,210 160,210 170,200 170,190;" stroke="black" stroke-width="1" stroke-opacity="0.55" fill="#1F618D"/>
//nose
<ellipse fill="#000" rx="30" ry="10" cx="150" cy="172" opacity="0.5" filter="url(#blur)"/>
<ellipse fill="#2874A6" rx="30" ry="10" cx="150" cy="170"/>
<ellipse fill="#000" rx="15" ry="30" cx="150" cy="172" opacity="0.5" filter="url(#blur)"/>
<ellipse fill="#2874A6" rx="15" ry="30" cx="150" cy="170"/>
<animateMotion begin="hds.end" dur="3s" fill="freeze" values="0,0;0,-200" id="kup"/>
<animateMotion begin="kup.end+6s" dur="3s" fill="freeze" values="0,-200;0,0"/>
</g>
<g>
<circle fill="#1F618D" r="10" cx="100" cy="310"/>
<circle fill="#1F618D" r="10" cx="80" cy="310"/>
<circle fill="#1F618D" r="10" cx="60" cy="310"/>
<circle fill="#1F618D" r="10" cx="200" cy="310"/>
<circle fill="#1F618D" r="10" cx="220" cy="310"/>
<circle fill="#1F618D" r="10" cx="240" cy="310"/>
<animateMotion begin="kor.mousedown" dur="1s" fill="freeze" values="0,0;0,-15" id="hds"/>
<animateMotion begin="kup.end+6s" dur="3s" fill="freeze" values="0,-15;0,0" id="endk"/>
</g>
<rect width="300" height="300" opacity="0" id="kor">
<animateMotion begin="kor.mousedown" dur="1ms" fill="freeze" values="0,0;-300,0"/>
<animateMotion begin="endk.end" dur="1ms" fill="freeze" values="0,-300;0,0"/>
</rect>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate