Skip to content

Instantly share code, notes, and snippets.

@JayHoltslander
Last active April 5, 2020 23:26
Show Gist options
  • Save JayHoltslander/5794ce5868bf18b863c4b6bcd6d2f6b7 to your computer and use it in GitHub Desktop.
Save JayHoltslander/5794ce5868bf18b863c4b6bcd6d2f6b7 to your computer and use it in GitHub Desktop.
SVG Emoji Favicon
<!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
<text y=%22.9em%22 font-size=%2290%22>😎</text>
</svg>">
<!--ANIMATED ATTEMPT-->
<!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><style>svg{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}svg{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-190deg);transform:perspective(400px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-170deg);transform:perspective(400px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,0deg);transform:perspective(400px) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,0deg);transform:perspective(400px) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-190deg);transform:perspective(400px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-170deg);transform:perspective(400px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,0deg);transform:perspective(400px) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,0deg);transform:perspective(400px) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}</style><text y=%22.9em%22 font-size=%22100%22>😎</text></svg>">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment