console.delight - usando CSS, SVG e HTML no console do navegador

• Deixar o console bonito para criar branding entre usuários curiosos
• A versão online do Photoshop exibe a versão no console com ícones e várias cores
• console.log/info tem limitações, mas ainda permite usar CSS/SVG e data:image para também exibir imagens

Recursos suportados no console

• SVG
  • Expressões SVG básicas: circle, path etc.
  • Gradiente, Clip Path, Mask, Filter, Transform, animações SMIL, foreignObject, Patterns
• CSS
  • Animações CSS, variáveis CSS, consultas @media, unidades de viewport
  • background-image: linear-gradient()
• JavaScript
  • Referências de DOM dentro de SVG, alteração do SVG DOM
  • Uso de variáveis globais e variáveis CSS
• Renderização de HTML
  • Há limitações parecidas com SVG. Não é possível usar a tag a, nem listeners de eventos etc.
  • O HTML dentro de foreignObject em SVG também permite transformações 3D