svg-image-reveals

I've been experimenting with creating animated svg's to reveal an underlaying image. Here is my progress at present.

The svg's about 30Kb in size and overlays any image to reveal it. It's just a mater of placing an image on your page and overlaying it with a reveal svg (both need to be adjusted to the same size).

The svg's must match the page background colour (flat of course) and whilst the svg's are currently set to a white background it is very simple to edit the svg in notepad or notepad++ to change this value.

If anyone is interested in using this idea please let me know and I'll explain further.

Great, good job.

Super !

i like the twist most.

Love Swash B2T and 3 Shape Reveal

Is that the ship you served on?

What if you started with wiping on the image inside the name of the ship then wiped out to expose the entire image?

I've added a few more animations. LINK

Quote:

---

Is that the ship you served on?

---

No Gary, it's a Norwegian coastal steamer with a lot of class which modern ships lack totally these days.

Quote:

---

What if you started with wiping on the image inside the name of the ship then wiped out to expose the entire image?

---

Yes that would be possible but I'm trying to create generic animated svg's that anyone can download and use above there own images ;-)

These are so cool. Love all the new ones.

I really like the fans; clean and simple with no eye confusion

Fantastic anims Egg.

Egg, a lot of work in these.
I assume SVGator still has your attention.

I have tried a different tack (nautical pun), using SVG Masking.
Attachment 130538

The code is a bit more tractable in that you can alter the letters to any word or phrase or symbol, change the hover transition and the mask overlay colour.

Acorn

Thanks for the commenys peeps. I'll get back further but here's a video (Oh God no, not another egg's video!)

Here's the template to mess about with. I'll post a zip file containing all the svg animations in the next few days.

Probably more to Gary's taste ;-)
@Acorn. LINK

Quote:

---

Originally Posted by Egg Bramhill

Probably more to Gary's taste ;-)
@Acorn. LINK

---

Tasty, but an extra Egg on top is a bit rich for most.

Acorn

EGG - that's great animation of flipping through a book. It's a pity that XARA doesn't have the capabilities for this animation.
I need to make some Flibooks.
I don't think it should be a problem for XARA, maybe the program would sell better if it was possible to create a Flipbook.
The current animations are quite simple.

Moved to Web Design Forum

Acorn

Here's a final site with three more added animated svg's.

Next I'll box them all up into a zip file so peeps can use them as they wish.

@ Spamiky:

Quote:

---

I need to make some Flipbooks.

---

Unfortunatley svg's are no good for this. Xara has never been able to Mould a bitmap apart from perspective moulds which are no use for pageflip construction.

I've looked again at my Peel svg & the file size is far too large. I might try reducing the number of Morph greatly to see if I can reduce the size. However the remainder are small (less than 30Kb) .

:) You are having way too much fun.

Quote:

---

Originally Posted by Spamiky

I need to make some Flibooks

---

Spamiky, look at https://heyzine.com/#examples.

I integrated it into a Xara Design with https://www.talkgraphics.com/showthr...494#post630494.
The PDF is not longer there so add this to a Placeholder body on a design page:

Code:

---

<iframe allowfullscreen="allowfullscreen" scrolling="no" class="fp-iframe" src="https://heyzine.com/flip-book/b700e6d1f2.html" style="border: 1px solid lightgray; width: 100%; height: 100%; min-height: 500px;"></iframe>

---

Acorn

Acorn - thanks. I solved it by purchasing a program for creating a flipbook.