Skip to content

Instantly share code, notes, and snippets.

@myfonj
Last active September 13, 2021 23:09
Show Gist options
  • Save myfonj/c9fd8cdd66dfb4d5a1ddd3a9e0f9d883 to your computer and use it in GitHub Desktop.
Save myfonj/c9fd8cdd66dfb4d5a1ddd3a9e0f9d883 to your computer and use it in GitHub Desktop.
animated favicon respecting prefers-reduced-motion embedded in datauri, in datauri document
data:text/html;charset=utf-8,<!doctype html>%0A<link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1,-15,19,19"><text transform-origin="10 -3">%F0%9F%A6%84</text><style>@keyframes x{to{transform:rotate(1turn)}}@keyframes y{to{opacity:0}}text{animation:2s x infinite alternate}@media(prefers-reduced-motion){text{animation-name:y}}</style></svg>'>%0A<title>Animated favicon affected by `prefers-reduced-motion` media query, embedded in datauri inside datauri document</title>%0A<style>:not(style,script){display:block; padding:0 .2em; background:darkslategray; color:snow; white-space:pre-wrap} title::after{content:' (in `' var(--prm) '` mode)'}html{--prm:'no-preference'}@media(prefers-reduced-motion:reduce){html{--prm:'reduce'}}</style>%0A<script>document.write('<plaintext>',decodeURIComponent(document.URL))</script>
(Works in Firefox)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment