Skip to content

Instantly share code, notes, and snippets.

@philwolstenholme

philwolstenholme/svg-loading-placeholder.html

Last active March 11, 2021 22:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save philwolstenholme/d87c77422ecc10f12d20eb887ce6e2f4 to your computer and use it in GitHub Desktop.
Save philwolstenholme/d87c77422ecc10f12d20eb887ce6e2f4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg-loading-placeholder.html
<img
style="
background: no-repeat center/cover
url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' viewBox=\'0 0 50 50\'%3e %3cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3e %3cfeGaussianBlur stdDeviation=\'.9\'%3e%3c/feGaussianBlur%3e %3cfeComponentTransfer%3e %3cfeFuncA type=\'discrete\' tableValues=\'1 1\'%3e%3c/feFuncA%3e %3c/feComponentTransfer%3e %3c/filter%3e %3cimage filter=\'url%28%23b%29\' preserveAspectRatio=\'none\' height=\'100%25\' width=\'100%25\' xlink:href=\'data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAHElEQVQImWNsbulgZPjHzc3PcvvOXYb/f/n4hABJ6gd39LTd2AAAAABJRU5ErkJggg==\'%3e %3c/image%3e %3c/svg%3e');
"
data-blurhash
src="/sites/default/files/2021-03/photo-1485304018316-1ff471aa1369.jpeg"
width="2850"
height="1900"
alt="Fire"
loading="lazy"
typeof="foaf:Image"
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment