HTML
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<sumbol><path id="штофф" stroke="#0aa" stroke-width="2"
d="M 50,150 L 25,10 L 155,10 L 130,150 L 50,150 Z"/>
</sumbol>
<pattern id="coda" width="100%" height="100%"><rect class="fon"/>
<foreignObject id="cod">
<div id="abz" xmlns="http://www.w3.org/1999/xhtml"><i>
"Белеет мой парус,<br>
Такой,.. одинокий,..<br>
На фоне -<br>стальных<br>кораблей".</i>
</div>
</foreignObject>
</pattern>
<use href="#штофф"/><rect class="text"/>
</svg>
CSS
html, body, svg
{display: block; margin: auto; width:100%; height: 100%;}
.fon {rx: 6px; fill: rgba(50,200,200,.4);}
#abz {padding: 16px; color: #822; text-align: center; background: rgba(0,0,0,.6);}
rect, #штофф, #cod {x:0; y:0; width: 140px; height: 140px; font-size: .6rem;}
.text, #штофф {fill: url(#coda);}
.text {animation: move-x 6s linear infinite alternate, move-y 8s linear infinite alternate;}
@keyframes move-x { from { x: 0; } to { x: 200; }}
@keyframes move-y { from { y: 0; } to { y: 200; }}
