javascript: (function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { el.style.outline = `1px solid ${colors[idx % colors.length]}`; [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })();
Thus green is always inside red. Any advances?
(function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { let currentThickness = (idx % 10) + 1; el.style.outlineColor = colors[idx % colors.length]; let direction = 1; setInterval(() => { if (currentThickness >= 10 || currentThickness <= 1) direction *= -1; el.style.outline = `${currentThickness}px solid ${colors[idx % colors.length]}`; currentThickness += direction; }, 100); [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })();