Animated SVG Images

ChainsawXIV
ChainsawXIV
edited April 2015 in Campaign Portal Building
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

  • twiggyleaf
    twiggyleaf
    Posts: 1,911
    They look really cool!

    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

  • saethone
    saethone
    Posts: 153
    wow that is super cool
  • Savannah
    Savannah
    Posts: 188
    Love 'em! Especially the middle one.
  • Kallak
    Kallak
    Posts: 1,090
    Very nice. I can see these adding some spice to future campaigns.
    All the best,
    - Kallak
  • Bortas
    Bortas
    Posts: 645
    Um..... those are out-friggin-standing!! I would love to read a tutorial and try the same!

    -bort
    "Morwindl"https://morwindl.obsidianportal.com
  • erwin
    erwin
    Posts: 58
    daaang! very clean
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    If you're familiar with HTML, creating SVG images will seem relatively simple. SVG, or Scalable Vector Graphics is an image format which uses a markup language just like HTML to draw, lay out, and animate elements within a single picture. By taking advantage of this, we can create images with the flexible compression of a JPG, the 8-bit transparency of a PNG, and flexible, powerful animation as the cherry on top.

    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.
    Post edited by ChainsawXIV on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    h3. SVG Setup

    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.
    Post edited by ChainsawXIV on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    And there you have it, all put together:

    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.
  • SkidAce
    SkidAce
    Posts: 830
    Kudos to you. It will take some time to absorb.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    You are still the man- you were the man when I started, and that still has not changed. This rocks!!

    Just trying to help out.

  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    Thanks guys. :)

    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.
    Post edited by ChainsawXIV on
  • Abersade
    Abersade
    Posts: 291
    This is very cool and I think I'll be trying it.
  • Keryth987
    Keryth987
    Posts: 997
    I'm obviously either doing something wrong or all this code is supposed to be put into CSS, because if I plug either the code here or the one listed as the finished code, into a page, I get the text and not an image.

    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/

  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    My bad - I should have said. To use this, you need to put all that code into a file with a .svg extension, and then use that file as an image - in an img tag or as a background image for example. And to do that you'll need to host the image file somewhere, of course. Putting it straight into a page on OP won't work, because the wiki server doesn't roll that way.
    Post edited by ChainsawXIV on
  • NikMak
    NikMak
    Posts: 379
    that looks amazing, very well done.
  • Belrathius
    Belrathius
    Posts: 206
    Just my opinion, but I feel that this should be stickied. Far too useful to let it get lost to time.

    Thanks Chainsaw for doing the tutorial. I'm going to need to practice this a bit to get it right too.
  • Bortas
    Bortas
    Posts: 645 edited April 2015
    So I dabbled, and enjoyed myself, this is what I came up with on my first try:

    "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
    Post edited by Bortas on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    Nice!

    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.
    Post edited by ChainsawXIV on
  • Bortas
    Bortas
    Posts: 645
    Thanks! I appreciate that. I was guessing that was what that tag was for, but laptop died and I haven't had a chance to play with it since.

    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
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Yeah, masking takes a little getting used to. As you can see from my examples above, whether you go black and white or shades of gray depends on the effect you're going for. Basically what you're painting there is how transparent you want the image to be at any given spot, where white is totally opaque, and black is totally transparent. Where that takes some getting used to is when you combine it with different blending modes.

    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. :/
  • Bortas
    Bortas
    Posts: 645
    Seriously enjoying this... I keep thinking about added complexity (such as multiple level of clouds)

    "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
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Looking good!

    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.
Sign In or Register to comment.

August 2022
In Over Their Heads

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions