<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<title>Wipe bottom to top</title>
	<defs>
		<clipPath id="cp1">
			<rect x="0%" y="100%" width="100%" height="120%">
				<animate attributeName="y" from="100%" to="-20%" />
			</rect>
		</clipPath>
		<linearGradient id="gradient1" x1="0" y1="0" x2="0" y2="1">
			<stop offset="1" stop-color="white" stop-opacity="1">
				<animate attributeName="offset" from="1" to="-0.2" />
			</stop>
			<stop offset="1.2" stop-color="white" stop-opacity="0">
				<animate attributeName="offset" from="1.2" to="0" />
			</stop>
		</linearGradient>
		<mask id="mask1">
			<rect x="0%" y="0%" width="100%" height="100%" fill="url(#gradient1)"  />
		</mask>
		<linearGradient id="gradient2" x1="0" y1="0" x2="0" y2="1">
			<stop offset="0.9" stop-color="white" stop-opacity="0">
				<animate attributeName="offset" from="0.9" to="-0.3" />
			</stop>
			<stop offset="1" stop-color="white" stop-opacity="1">
				<animate attributeName="offset" from="1" to="-0.2" />
			</stop>
		</linearGradient>
		<mask id="mask2">
			<rect x="0%" y="0%" width="100%" height="100%" fill="url(#gradient2)"  />
		</mask>
	</defs>
	<rect width="100%" height="100%" fill="#000000" />
	<image id="image2" width="100%" height="100%" preserveAspectRatio="xmidymid meet" mask="url(#mask2)" />
	<image id="image1" width="100%" height="100%" preserveAspectRatio="xmidymid meet" mask="url(#mask1)" />
</svg>
