Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <svg width="200" height="200" viewBox="0 0 100 100" id="vanilla-svg"> <circle id="moving-circle" cx="50" cy="50" r="20" fill="royalblue" /> <text x="50" y="90" font-size="6" text-anchor="middle" font-family="sans-serif">Click to Change Color</text> </svg> <script> (function() { const svg = document.getElementById('vanilla-svg'); const circle = document.getElementById('moving-circle'); // Toggle color on click using vanilla JS svg.addEventListener('click', function() { const currentColor = circle.getAttribute('fill'); const newColor = currentColor === 'royalblue' ? 'tomato' : 'royalblue'; circle.setAttribute('fill', newColor); }); })(); </script>
