<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- Typy's face -->
    <rect x="150" y="100" width="100" height="100" fill="#4ecdc4" stroke="#000" stroke-width="2"/>
    
    <!-- Typy's eyes -->
    <circle cx="180" cy="130" r="10" fill="#000"/>
    <circle cx="220" cy="130" r="10" fill="#000"/>
    
    <!-- Typy's smile -->
    <path d="M 170 170 Q 200 190 230 170" stroke="#000" stroke-width="3" fill="none"/>
    
    <!-- Magical sparkle -->
    <polygon points="50,50 60,70 80,60 60,80 50,100 40,80 20,60 40,70" fill="#ffd700" opacity="0.8">
        <animateTransform attributeName="transform" type="rotate" values="0 50 75;360 50 75" dur="2s" repeatCount="indefinite"/>
    </polygon>
</svg>