1<?xml version="1.0" standalone="no"?> 2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 4 <title>Wipe right to left</title> 5 <defs> 6 <linearGradient id="gradient1" x1="0" y1="0" x2="1" y2="0"> 7 <stop offset="1" stop-color="white" stop-opacity="1"> 8 <animate attributeName="offset" from="1" to="-0.2" /> 9 </stop> 10 <stop offset="1.2" stop-color="white" stop-opacity="0"> 11 <animate attributeName="offset" from="1.2" to="0" /> 12 </stop> 13 </linearGradient> 14 <mask id="mask1"> 15 <rect x="0%" y="0%" width="100%" height="100%" fill="url(#gradient1)" /> 16 </mask> 17 <linearGradient id="gradient2" x1="0" y1="0" x2="1" y2="0"> 18 <stop offset="0.9" stop-color="white" stop-opacity="0"> 19 <animate attributeName="offset" from="0.9" to="-0.3" /> 20 </stop> 21 <stop offset="1" stop-color="white" stop-opacity="1"> 22 <animate attributeName="offset" from="1" to="-0.2" /> 23 </stop> 24 </linearGradient> 25 <mask id="mask2"> 26 <rect x="0%" y="0%" width="100%" height="100%" fill="url(#gradient2)" /> 27 </mask> 28 </defs> 29 <rect width="100%" height="100%" fill="#000000" /> 30 <image id="image2" width="100%" height="100%" preserveAspectRatio="xmidymid meet" mask="url(#mask2)" /> 31 <image id="image1" width="100%" height="100%" preserveAspectRatio="xmidymid meet" mask="url(#mask1)" /> 32</svg> 33