<svg>
<defs>
<clipPath id="cp-roundcorners">
<rect width="100%" height="100%" fill="gold" fill-opacity=".5"
rx="60"/>
</clipPath>
<symbol id="s-wavy-path">
<g transform="translate(-50,60)">
<path d="M903,4.5 C903,4.5 854,42.5341344 803.148089,42.2925317 C753.981141,42.0589344 753.709827,1.76742786 703.354914,2.13371392 C653,2.49999998 652.817934,41.4339085 602.908967,41.9840226 C553,42.5341367 552.597027,1.1857595 503.173513,1.84287976 C453.75,2.50000002 452.074424,40.9050063 403.037212,41.7195701 C354,42.5341339 350.880655,2.72739994 302.940328,2.61369997 C255,2.5 253.131621,42.5536648 203.06581,42.5341357 C153,42.5146065 154,2.5 103.175781,2.5 C52.3515625,2.5 3,42.5341344 3,42.5341344"></path>
</g>
</symbol>
<symbol id="s-wavy-path-vert">
<use xlink:href="#s-wavy-path" transform=" translate(130,-30) rotate(90)"/>
</symbol>
<mask id="m-wavy-lines">
<use xlink:href="#s-wavy-path" y="-100" class="u-line"/>
<use xlink:href="#s-wavy-path" y="-50" class="u-line"/>
<use xlink:href="#s-wavy-path" class="u-line"/>
<use xlink:href="#s-wavy-path" y="50" class="u-line"/>
<use xlink:href="#s-wavy-path" y="100" class="u-line"/>
<use xlink:href="#s-wavy-path" y="150" class="u-line"/>
<use xlink:href="#s-wavy-path" y="200" class="u-line"/>
<use xlink:href="#s-wavy-path" y="250" class="u-line"/>
<use xlink:href="#s-wavy-path" y="300" class="u-line"/>
<use xlink:href="#s-wavy-path" y="350" class="u-line"/>
<use xlink:href="#s-wavy-path" y="400" class="u-line"/>
<use xlink:href="#s-wavy-path" y="450" class="u-line"/>
</mask>
<mask id="m-wavy-lines-vertical">
<use xlink:href="#s-wavy-path-vert" x="-50" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="50" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="100" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="150" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="200" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="250" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="300" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="350" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="400" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="450" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="500" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="550" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="600" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="650" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="700" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="750" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="800" class="u-line"/>
<use xlink:href="#s-wavy-path-vert" x="850" class="u-line"/>
</mask>
<symbol id="s-path">
<path d="M0,0 0,800" transform="translate(25,0)"/>
</symbol>
<mask id="m-lines">
<use xlink:href="#s-path" class="u-line"/>
<use xlink:href="#s-path" x="50" class="u-line"/>
<use xlink:href="#s-path" x="100" class="u-line"/>
<use xlink:href="#s-path" x="150" class="u-line"/>
<use xlink:href="#s-path" x="200" class="u-line"/>
<use xlink:href="#s-path" x="250" class="u-line"/>
<use xlink:href="#s-path" x="300" class="u-line"/>
<use xlink:href="#s-path" x="350" class="u-line"/>
<use xlink:href="#s-path" x="400" class="u-line"/>
<use xlink:href="#s-path" x="450" class="u-line"/>
<use xlink:href="#s-path" x="500" class="u-line"/>
<use xlink:href="#s-path" x="550" class="u-line"/>
<use xlink:href="#s-path" x="600" class="u-line"/>
<use xlink:href="#s-path" x="650" class="u-line"/>
<use xlink:href="#s-path" x="700" class="u-line"/>
<use xlink:href="#s-path" x="750" class="u-line"/>
<use xlink:href="#s-path" x="800" class="u-line"/>
</mask>
<mask id="m-circles">
<circle r="5" cx="0" cy="530" class="u-line"/>
<circle r="50" cx="0" cy="530" class="u-line"/>
<circle r="100" cx="0" cy="530" class="u-line"/>
<circle r="150" cx="0" cy="530" class="u-line"/>
<circle r="200" cx="0" cy="530" class="u-line"/>
<circle r="250" cx="0" cy="530" class="u-line"/>
<circle r="300" cx="0" cy="530" class="u-line"/>
<circle r="350" cx="0" cy="530" class="u-line"/>
<circle r="400" cx="0" cy="530" class="u-line"/>
<circle r="450" cx="0" cy="530" class="u-line"/>
<circle r="500" cx="0" cy="530" class="u-line"/>
<circle r="550" cx="0" cy="530" class="u-line"/>
<circle r="600" cx="0" cy="530" class="u-line"/>
<circle r="650" cx="0" cy="530" class="u-line"/>
<circle r="700" cx="0" cy="530" class="u-line"/>
<circle r="750" cx="0" cy="530" class="u-line"/>
<circle r="800" cx="0" cy="530" class="u-line"/>
<circle r="850" cx="0" cy="530" class="u-line"/>
<circle r="900" cx="0" cy="530" class="u-line"/>
<circle r="950" cx="0" cy="530" class="u-line"/>
<circle r="1000" cx="0" cy="530" class="u-line"/>
</mask>
<filter id="fl-shadow" filterUnits="userSpaceOnUse" x="0" y="0"
width="800" height="500">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="0" dy="0" result="offsetBlr" />
<feFlood flood-color="rgba(0,0,0,.9)"/>
<feComposite operator="in" in2="offsetBlr" result="colBlur"/>
<feMerge>
<feMergeNode in="colBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text y="260" x="400" text-anchor="middle">SVG is magic.</text>
<g class="g-images" clip-path="url(#cp-roundcorners)">
<image xlink:href="https://img-fotki.yandex.ru/get/6208/5091629.73/0_63193_9ffa75d7_orig" width="100%" height="100%" class="image im-mask-waves-2"/>
<image xlink:href="https://img-fotki.yandex.ru/get/5808/yoksel.62/0_513b2_f8213a6f_orig" width="100%" height="100%" class="image im-mask-waves-1"/>
<image xlink:href="https://img-fotki.yandex.ru/get/4705/yoksel.62/0_50544_255fa1d3_orig" width="100%" height="100%" class="image im-mask-lines"/>
<image xlink:href="https://img-fotki.yandex.ru/get/5604/yoksel.60/0_4f376_c12baf67_orig" width="100%" height="100%" class="image im-mask-circles"/>
</g>
</svg>
$duration: 25s;
$steps: 4;
$step: $duration/$steps;
$mask-duration: $step;
$vert-max: 28*2;
$vert-duration: $mask-duration;
$vert-step: $vert-duration/$vert-max;
BODY {
background: #111;
}
svg {
display: block;
position: absolute;
width: 800px;
height: 532px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: visible;
}
text {
fill: #222;
fill-opacity: .5;
font-size: 3em;
filter: url(#fl-shadow)
}
.image {
animation: opacity $duration infinite step-start;
opacity: 0;
@for $item from 1 through $steps {
&:nth-child(#{$steps}n + #{$item}) {
animation-delay: -#{$step * $item};
}
}
}
@keyframes opacity {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.u-line {
fill: none;
stroke: white;
stroke-width: 0;
stroke-opacity: 0;
animation: stroke-width-line $vert-duration infinite;
@for $item from 1 through $vert-max {
&:nth-child(#{$vert-max}n + #{$item}){
animation-delay: $vert-step * $item;
}
}
}
@keyframes stroke-width-line {
20% {
stroke-width: 51;
stroke-opacity: 1;
}
60% {
stroke-width: 51;
stroke-opacity: 1
}
70% {
stroke-width: 0;
stroke-opacity: 0;
}
}
image {
/* display: none; */
}
.im-mask-waves-1 {
mask: url(#m-wavy-lines);
}
.im-mask-waves-2 {
mask: url(#m-wavy-lines-vertical);
}
.im-mask-lines {
mask: url(#m-lines);
}
.im-mask-circles {
mask: url(#m-circles);
}
Also see: Tab Triggers