Boy | SVG Meme Gallery

X: 280 Y: 140 W: 640 H: 1136
Background Grid:
Code Handoff Dev Mode
vector.svg
<svg width="640" height="1136" viewBox="0 0 640 1136" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Boy">
<rect width="640" height="1136" fill="url(#paint0_linear_2060_20)"/>
<path id="Vector 55" d="M189.5 641.5C115.724 624.421 74.2231 597.818 0 529V0H640V708C333.358 643.278 213.062 589.064 95.5 459.5C117.198 536.091 137.35 576.034 189.5 641.5Z" fill="black"/>
<g id="R eye">
<rect id="Eye Lid" x="394" y="731" width="183" height="16" fill="black"/>
<path id="eye" d="M485 793C513.719 793 537 773.748 537 750C537 743.962 535.495 738.214 532.778 733H437.222C434.505 738.214 433 743.962 433 750C433 773.748 456.281 793 485 793Z" fill="black"/>
</g>
<g id="L eye">
<rect id="Eye Lid_2" x="65" y="731" width="183" height="16" fill="black"/>
<path id="eye_2" d="M156 793C184.719 793 208 773.748 208 750C208 743.962 206.495 738.214 203.778 733H108.222C105.505 738.214 104 743.962 104 750C104 773.748 127.281 793 156 793Z" fill="black"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_2060_20" x1="320" y1="431.5" x2="320" y2="919.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E57F65"/>
<stop offset="1" stop-color="#FEB89B"/>
</linearGradient>
</defs>
<script type="text/javascript">
<![CDATA[
(function() {
    const left = document.getElementById("eye_2");
    const right = document.getElementById("eye");
    if (!left || !right) return;

    const leftCenter = { x: 156, y: 750 };
    const rightCenter = { x: 485, y: 750 };
    const maxDx = 20;
    const maxDy = 2;

    const isEmbedded = window.parent !== window;

    if (!isEmbedded) {
        let isMouseActive = false;
        let idleTimer = null;
        let t = 0;

        function autoAnimate() {
            if (isMouseActive) return;
            t += 0.02;
            const dx = Math.sin(t) * 15;
            const dy = Math.cos(t * 0.7) * 4;
            left.setAttribute("transform", `translate(${dx}, ${dy})`);
            right.setAttribute("transform", `translate(${dx}, ${dy})`);
            requestAnimationFrame(autoAnimate);
        }

        // Start auto animation if standalone
        autoAnimate();

        // Standalone mouse tracking within the SVG frame
        window.addEventListener("mousemove", (e) => {
            isMouseActive = true;
            clearTimeout(idleTimer);
            
            idleTimer = setTimeout(() => {
                isMouseActive = false;
                autoAnimate();
            }, 3000);

            const svg = document.querySelector("svg");
            const rect = svg.getBoundingClientRect();
            
            const mouseX = ((e.clientX - rect.left) / rect.width) * 640;
            const mouseY = ((e.clientY - rect.top) / rect.height) * 1136;

            const dxL = mouseX - leftCenter.x;
            const dyL = mouseY - leftCenter.y;
            
            const dxR = mouseX - rightCenter.x;
            const dyR = mouseY - rightCenter.y;

            const strength = 0.08;
            const moveL_x = Math.min(maxDx, Math.max(-maxDx, dxL * strength));
            const moveL_y = Math.min(maxDy, Math.max(-maxDy, dyL * strength));
            
            const moveR_x = Math.min(maxDx, Math.max(-maxDx, dxR * strength));
            const moveR_y = Math.min(maxDy, Math.max(-maxDy, dyR * strength));

            left.setAttribute("transform", `translate(${moveL_x}, ${moveL_y})`);
            right.setAttribute("transform", `translate(${moveR_x}, ${moveR_y})`);
        });
    }
})();
]]>
</script>
</svg>