svg-image-reveals

[Egg Bramhill]

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.

[Spamiky]

Great, good job.

[rsrsrs]

Super !

i like the twist most.

[gwpriester]

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?

[Egg Bramhill]

I've added a few more animations. LINK

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.

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 ;-)

[gwpriester]

These are so cool. Love all the new ones.

[handrawn]

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

[wizard509]

Fantastic anims Egg.

[Acorn]

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.
SVG - Row row row your Boat.xar

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

[Egg Bramhill]

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