Beispiel:Shadow-4.html
Aus SELFHTML-Wiki
<!doctype html> <htm land="de"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <title>Landscape</title>
<style>
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
body {
background: url('https://wiki.selfhtml.org/images/4/4b/Landscape-1.svg') repeat-x;
background-size: cover; /* or "contain" depending on your SVG */
animation: scroll-bg 20s linear infinite;
}
svg {
width: 100vw; height: 100vh; filter: drop-shadow(10vw 30vh 0 rgb(0 0 0 / 0.5));
} h1 {text-align: center;}
@keyframes scroll-bg {
from {
background-position: 0 0;
}
to {
background-position: -2000px 0; /* depends on SVG width */
}
}
#segelflieger {
offset-path: path("m 0,10 c 200,-100 600,100 800,0");
offset-rotate: auto;
animation: fly 8s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes fly {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
/* Grundlayout */
- {
box-sizing: border-box; margin: 0;
}
</style>
</head> <body>
drop-shadow()
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg">
<g id="segelflieger" transform="translate(0,200)">
<path id="rumpf" stroke="black" fill="white" d="m -51 1.5 l 1.5 -18 l -5.5 1 l -7 -0.5 l 33.5 -12 l 3 0.5 l -11.5 9 l 7 19 l 76.5 4.5 l 38.5 -25 l 14.5 -18 l 6 -0.5 l -8.5 18.5 l -31 25 c 24.5 3 48 16.5 46.5 20.5 c -2 4.5 -43.5 2 -65.5 -5.5 l -49.5 23.5 l -33.5 4.5 l -5.5 -1.5 l 25.5 -6.5 l 45.5 -25.5 l -80.5 -1.5 z" />
<g id="linien" stroke="black" fill="none"> <polyline points="-49.5,-17 -37.5,-19" /> <path d="m 29 15.5 l 3 -1.5 c 11 -4 25 0.5 23 2.5 l -5.5 2.5" /> <polyline points="84.5,-20 96.5,-19" /> <polyline points="-16.5,41 -3,44.5" /> <polyline points="46,4.5 65.5,6" /> <path d="m 68.5,6.5 c -6.5,0 -10.5,10.5 -4.5,11.5 c 13.5,2 26.5,4.5 26.5,4.5 c -0.5,-2 1.5,-7 5,-6.5" /> </g>
</g>
</svg>
</body> </html>
