Last active
September 13, 2021 23:09
-
-
Save myfonj/c9fd8cdd66dfb4d5a1ddd3a9e0f9d883 to your computer and use it in GitHub Desktop.
animated favicon respecting prefers-reduced-motion embedded in datauri, in datauri document
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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