یک صفحه HTML و JavaScript بسازید که یک دایره SVG نمایش می‌دهد که با کلیدهای جهت‌نما حرکت کند و با کلیک روی آن رنگش عوض شود.

در یک فایل HTML یک عنصر و یک عنصر داخل آن ایجاد کنید و با JavaScript به رویدادهای document.addEventListener('keydown', ...) برای تغییر مقادیر cx و cy دایره واکنش نشان دهید (با setAttribute). برای تغییر رنگ روی خود دایره از addEventListener('click', ...) استفاده کرده و مقدار fill را تغییر دهید یا بین چند رنگ جا‌به‌جا کنید. نکات: مقادیر cx/cy را با Number یا parseInt بخوانید، محدودیت‌های viewBox را رعایت کنید تا دایره از محدوده بیرون نرود، و برای تجربه بهتر از CSS برای نشانگر ماوس و از requestAnimationFrame یا سرعت ثابت برای حرکت نرم‌تر استفاده کنید.