SOURCE

<!-- <svg width="400" height="400">
    <defs>
        <mask id="test-mask">
            <rect x="5" y="5" width="390" height="390" fill="white">
            </rect>
             <text x="10" y="20" style="fill:#0000ff;stroke:black">SVG Text Example</text>
        </mask>
    </defs>
    <rect x="5" y="5" width="390" height="390" fill="red" mask="url(#test-mask)"></rect>
</svg> -->

<svg width="400" height="400">
    <defs>
        <path 
        id="p"
        d="M5 5 L395 5 L395 395 L5 395 Z" 
        fill="none"></path>
        <mask id="fly-mask">
            <circle r="50" cx="0" cy="0" fill="white">
                <animateMotion
                    path="M5 5 L395 5 L395 395 L5 395 Z" 
                    dur="2s"
                    repeatCount="indefinite" />
            </circle>
        </mask>
        <linearGradient id="fly-gradient">
            <stop offset="0%" stop-color="red" stop-opacity="0.5"></stop>
            <stop offset="50%" stop-color="pink"></stop>
            <stop offset="100%" stop-color="yellow"></stop>
        </linearGradient>
        <radialGradient
            id="fly-radia"
            cx="50%"
            cy="50%"
            fx="50%"
            fy="50%"
            r="50%"
        >
            <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
        </radialGradient>
    </defs>
    <use href="#p" stroke-width="3" stroke="#d77"></use>
    <use href="#p" stroke-width="3" stroke="#4fd2dd" mask="url(#fly-mask)"></use>
</svg>