ChainsawXIV
Hey there folks! In the process of setting up for my next campaign, I ended up trying something I've wanted to do for a while now, but haven't had the chance to try out - using SVG to create animated scenes I can include on pages as simple images. I think the results came out pretty cool (if I do say so myself), so I thought I'd share, and offer to teach. If folks are interested, I'd be happy to write a tutorial that describes how you can put your own together.
Here's what they look like "in their intended environment":https://mx.obsidianportal.com/wiki_pages/test-page.
And what they look like as I'm using them "with text over the top":https://mx.obsidianportal.com/.
!http://omnichron.net/external/op/src/meridian/underworld.svg!
!http://omnichron.net/external/op/src/meridian/yushan.svg!
!http://omnichron.net/external/op/src/meridian/creation.svg!
!http://omnichron.net/external/op/src/meridian/void.svg!
!http://omnichron.net/external/op/src/meridian/sun.svg!
Comments
twigs
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
- Kallak
-bort
"Morwindl"https://morwindl.obsidianportal.com
Campaign of the Year - 2018
As an example, I'll talk you through how the middle image above is built, step by step. All five of those images are built using the same techniques, and once you’ve been through one, you should be able to download them and open them up in your text editor to dissect them for insights and ideas to use in your own work.
First though, let’s make sure you've got the right tools for the job. There are two applications you'll need - an image editor, like Photoshop or Gimp to create the components of your image (I'm going to assume you know how to use this part, in the interest of keeping this focused), and a text editor like "Notepad++":http://notepad-plus-plus.org/ to edit the SVG file itself.
h3. Image Layers
The images above are all constructed along the same lines - by taking a basic background image, layering translucent moving elements on top, and then using a mask to chew up the edges of the whole thing for a more organic feel. Every element of that is a simple image, which I bashed together in Photoshop and then saved as a (highest quality) JPG file. Let’s go through them:
The basic background image that’s the foundation of the whole thing. This was something I made first as a static image, and then built the animation on top of.
!http://omnichron.net/external/op/src/creation/backdrop.jpg!
The stormclouds texture which will move across the sky of the image. I scavenged a simple tiling storm cloud image from google, and smooshed in vertically so it would look like it was viewed in perspective from below.
!http://omnichron.net/external/op/src/creation/stormclouds.jpg!
A black and white masking image which defines where the scrolling storm clouds will appear. The white areas are where that texture will be visible, while in the black areas it will be hidden, and in the gray areas it will be more or less transparent accordingly.
!http://omnichron.net/external/op/src/creation/sky.jpg!
Another cloud texture, this one more regular in size, and black and white, which will be used to create the clouds that scroll by in the foreground of the image.
!http://omnichron.net/external/op/src/creation/cloudshadows.jpg!
Another mask, this one for the foreground clouds, so they’re most visible over the well lit hillsides in the image and seem to fade in and out as the move along.
!http://omnichron.net/external/op/src/creation/hillside.jpg!
And finally, the mask that will be used to do the treatment around the edges of the entire composition, created using more scavenged image samples, plus some filters.
!http://omnichron.net/external/op/src/creation/mask.jpg!
In the examples below, you’ll see that I reference these images by name, but in the "finished code":http://omnichron.net/external/op/src/creation/creation.txt, you’ll see that I’ve replaced those names with a bunch of crazy gobbledegook. All those apparently random characters are what these images look like when they’re converted into text in a process called URI encoding.
For security and performance reasons, web browsers don’t allow you to reference one image from within another, so you’ll have to URI encode your components and paste them into your SVG directly. Happily however, that’s easy to do. Just feed your image to an "online URI encoder":http://www.askapache.com/online-tools/base64-image-converter/, and paste the output in in place of the file path and name.
With the source material in hand, it’s time to work the magic and build our SVG file. The file starts out with a set of tags which defines that it is, in fact, an SVG, and it’s dimensions. Everything else will go inside these tags:
bc.
Next, we set up some CSS styles inside the SVG to control how the animated layers will be blended with the image. Here we’ll use _lighten_ and _overlay_, but there are a "range of blending modes available":https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode, which will look familiar from your image editing program.
bc.
.lighten{mix-blend-mode:lighten;}
.overlay{mix-blend-mode:overlay;}
Then, we need to set up our cloud textures, so that they can tile. By tiling them we’ll get a continuous strip of repeating images that we can scroll forever. These are set up in _pattern_ tags within the _defs_ block of our SVG file, and there’s one for each of our two cloud textures.
Each pattern specifies a size (matching the image it uses, in this case, though you can specify a different size and the image will be stretched or squashed to fit), and then contains an image tag with the image it will use. Note that unlike an HTML image tag, this uses xlink:href= instead of src=. This is where your image URI will go.
And this is also where we do our animation, causing the pattern to scroll. We accomplish this using an animate tag, where we tell it that it should adjust the pattern's x coordinate (it's horizontal position) by the width of the texture over some period of time. A lower time here means faster scrolling.
bc.
Next, we need to define our masks, which will also go into the defs block, in their own special mask element. Note that we've given both patterns and masks an id value, which we'll use to apply them below, and that each one specifies a height and width. These dimensions default to zero, so if you don't specify them, your image won't show up.
bc.
And finally, with all the prep work done, it's time to assemble the visible parts of the image. Our image is made out of one simple image tag, for the base layer, with two rect tags (rectangles) that are filled with our patterns, and masked by our masks. Then the whole thing is put in a g (group) block, and the main mask is applied to that.
Note here that we use the class attribute on our two rects, just like in HTML, to apply the blending mode classes we defined above. The overlay mode is used on the sky so the clouds texture will make it both lighter and darker, while the lighten mode is used on the foreground to produce a look of illuminated fog.
bc.
bc.
.lighten{mix-blend-mode:lighten;}
.overlay{mix-blend-mode:overlay;}
I'm sure that was less than perfectly clear, so please don't hesitate to ask questions.
Unconquered Kingdoms, July 2016 CotM
Just trying to help out.
Incidentally, you can also use custom CSS to override your campaign banner to an SVG, which I've also done for the new campaign.
Now I'm tempted to do the background image as well... but at some point it's just too much.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Keelah Se'lai,
Keryth
"Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
"2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
Thanks Chainsaw for doing the tutorial. I'm going to need to practice this a bit to get it right too.
"Original":http://bortas.net/storage/test/Banner.jpg
!http://bortas.net/storage/test/Banner.jpg!
"Animated":http://bortas.net/storage/test/animated_banner.svg
!http://bortas.net/storage/test/animated_banner.svg!
I had fun, but I certainly want to spend some time refining the process!
-bort
"Morwindl":https://morwindl.obsidianportal.com
Campaign of the Year - 2018
One tip I'll offer is that you've got a little timing glitch that's easy to fix - you'll notice that every 90s the scrolling of your clouds resets visibly. If you make the scrolling distance in the animate tag equal to the width of the clouds image (230), that won't happen. It'll still reset at the end of that time, but because it will have moved exactly one tile's width, the reset won't be visible.
If there's anything specific that you'd like to refine and want advice or help on, ask and I'll be happy to provide.
I'm not terribly liking how much lighter the image is, but I believe I have the solution for that... once I get home from work (I made the mask literally black and white.... not realizing the white is probably supposed to be transparent. Don't laugh, I'm clueless!)
I'm also not too fond of my cloud texture, now that I see it in action.
But really, working through the coding tutorial (which is awesome, BTW!) was easy, it was figuring out masking and what have you. I expect to do another version tonight or tomorrow (I'll post!).
I'm starting to think your idea of an animated background is something I really need to do!
Finally; I can't figure out how to upload an SVG to OP works... or is that just not a thing? My personal webserver is... slow.
-bort
"Morwindl":https://morwindl.obsidianportal.com
Campaign of the Year - 2018
For the lightness thing, really what you want to mess with is some combination of the blending mode, the overall opacity of the layer itself (which you can set with _opacity="0.5"_ on the _image_ tag, where a value of 0.0 is transparent, and 1.0 is opaque), and the cloud texture itself. That texture is pretty bright over all, so with _overlay_ mode it's mostly lightening what's beneath it. You can mess with the levels, lightness, and contrast of the texture in your image editor, and find a better balance - in overlay, a 'middle gray' (the gray exactly between white and black) will have no effect on the underlying image, where as darker and lighter tones darken and lighten the image respectively, so adjusting the levels of you clouds so there's a lot more gray going on could do what you're looking for. In this case, that looks like making the cloud texture darker over all.
The image choices and animation are definitely where this goes from science to art though, so mostly it's about experimenting with it until you capture the image you've got in your mind's eye.
And for uploading, OP doesn't support saving SVGs, so you've got to host it somewhere else and link it. :/
"Original":http://bortas.net/storage/test/Banner.jpg
!http://bortas.net/storage/test/Banner.jpg!
"Animated":http://bortas.net/storage/OP_Morwindl/animated_banner.svg
!http://bortas.net/storage/OP_Morwindl/animated_banner.svg!
I keep having these ideas that I have to shut down, that are essentially changing of perspective, or a rotation of the primary subject... gotta shut that down and focus!
-bort
"Morwindl":https://morwindl.obsidianportal.com
Campaign of the Year - 2018
Multiple layers moving at different speeds can be a great way to produce a sense of depth through parallax. In the first image above, for example, there are three moving layers - clouds in the background moving left to right, and then two layers of debris in the foreground moving right to left at different rates (they're actually the same debris image, used twice). The two foreground layers moving relative to one another gives the impression of more complexity than there actually is, plus depth, and the overall effect is meant to be like standing in a slow cyclone.