-
-
Save alexmwalker/00ff64a20827a5e50371c8bca9502bda to your computer and use it in GitHub Desktop.
.hero-container { width: 100%; background-image: url(https://gistcdn.githack.com/alexmwalker/00ff64a…/raw/8a47c2c…/sparkle2.svg), url(/scribe/themes/salvos/templates/wishes/images/2023/treeline-half.png),url(/scribe/themes/salvos/templates/wishes/images/2023/base-stars-50.png),url(/scribe/themes/salvos/templates/wishes/images/2023/bokeh-seamless-2.jpg); background-repeat: repeat,no-repeat,no-repeat,repeat; background-attachment: scroll; background-size: auto 80%,auto 90%,auto 100%,100% auto; background-position: 0% 0%, 90% 100%,10% 50%,0% 0%; padding: 0; float: none; }
You should be able to use this animated SVG as a tile-able layer to give things a magical sparkle effect. I see two main ways to deploy it.
- Use a pseudo element to overlay the wrapper on an IMG (i.e. IMGs don't have their own pseudo elements). This might be something like a golden-ticket IMG?
- Use it as a the top layer in a multi-layered background-image. (i.e. perhaps a sparkling night sky).
It's a small file that produces a very 'random-like' sparkle effect. I believe it's relatively 'performant' - but I'd love to hear from anyone viewing on low-powered systems.
https://gistcdn.githack.com/alexmwalker/00ff64a20827a5e50371c8bca9502bda/raw/8a47c2c410b2468723e62f83312d3c62c118cd07/sparkle2.svg