Beispiel:Advent-2017.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0;" />

<title>Adventskalender</title> <style> html { background-image: url("data:image/svg+xml,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100' height='54' %3E%3Cdesc%3Everschiedene Muster für Steine und Mauerwerk%3C/desc%3E%3Cdefs%3E%3CclipPath id='normal'%3E%3Crect x='0' y='0' width='100' height='54'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url%28%23normal%29'%3E%3Crect width='100' height='54' fill='%23999' stroke-width='0'%3E%3C/rect%3E%3Csymbol id='ziegel'%3E%3Crect width='33' height='8' stroke-width='0'/%3E%3C/symbol%3E%3Cuse href='%23ziegel' x='1' y='1' fill='%23b03f1d'/%3E%3Cuse href='%23ziegel' x='35' y='1' fill='%23952319'/%3E%3Cuse href='%23ziegel' x='69' y='1' fill='%236e2f0c'/%3E%3Cuse href='%23ziegel' x='-17' y='10' fill='%238f2f0c'/%3E%3Cuse href='%23ziegel' x='17' y='10' fill='%2394552a'/%3E%3Cuse href='%23ziegel' x='51' y='10' fill='%23b7592c'/%3E%3Cuse href='%23ziegel' x='85' y='10' fill='%238f2f0c'/%3E%3Cuse href='%23ziegel' x='1' y='19' fill='%236e2f0c'/%3E%3Cuse href='%23ziegel' x='35' y='19' fill='firebrick'/%3E%3Cuse href='%23ziegel' x='69' y='19' fill='%23952319'/%3E%3Cuse href='%23ziegel' x='-17' y='28' fill='%238f2f0c'/%3E%3Cuse href='%23ziegel' x='17' y='28' fill='%23b7592c'/%3E%3Cuse href='%23ziegel' x='51' y='28' fill='%236e2f0c'/%3E%3Cuse href='%23ziegel' x='85' y='28' fill='%238f2f0c'/%3E%3Cuse href='%23ziegel' x='1' y='37' fill='%236e2f0c'/%3E%3Cuse href='%23ziegel' x='35' y='37' fill='%23952319'/%3E%3Cuse href='%23ziegel' x='69' y='37' fill='%2394552a'/%3E%3Cuse href='%23ziegel' x='-17' y='46' fill='%238f2f0c'/%3E%3Cuse href='%23ziegel' x='17' y='46' fill='%2394552a'/%3E%3Cuse href='%23ziegel' x='51' y='46' fill='%23b7592c'/%3E%3Cuse href='%23ziegel' x='85' y='46' fill='%238f2f0c'/%3E%3C/g%3E%3C/svg%3E%0A"); }

body { 

 max-width: 60em;
 margin: 1em auto;

}

h1{ 

 font-size: 3em;	
 text-align:center;
 color:white;

}

h1 img { vertical-align: bottom }

svg { 

 width:100%;
 height:auto;

}

g text { 

 font-size: 24px;
 font-weight:bold;
 text-anchor: middle;

}

.eins { 

 fill: #fffbf0; 
 stroke: #e7c157;
 stroke-width: 2;

}

.zwei { 

 fill: #e7c157;
 stroke:#866a00; 
 stroke-width: 1;

}

.drei { 

 fill: yellow;
 stroke: black; 
 stroke-width: 1;

} .vier { 

 fill: #f1f3f4;
 stroke: #666; 
 stroke-width: 2;

}

.five { 

 fill: #ffebe6;
 stroke: #c32e04;
 stroke-width: 2;

}

.six { 

 fill: #df6c20 ;
 stroke: #666;
 stroke-width: 1;

}


</style>

</head>

<body>

<img src="https://wiki-test.selfhtml.org/images/6/66/SELF-Logo-Nikolaus.svg" width="200" alt="logo"> Adventskalender 2017

<svg width="600" height="400" viewBox="0 0 600 400" > <defs> 

 <path id="stern5" d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36

c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16 

              0,2 10,23 8,24z" />   
 <path id="stern6" d="m47,55 l-16-9.2 -16 9.2 v-18.5 l-16-9.2 l16-9.2 v-18.5 l16 9.2 16 -9.2 v18.5 l16 9.24 -16 9.24 v18.56z" />	
 <path id="stern8" d="M7,7 h12 l8,-8 l8,8 h12 v12 l8,8l-8,8v12 h-12 l-8,8l-8,-8h-12 v-12l-8,-8l8,-8z" />   
 <symbol id="stocking">
   <path  style="fill:#c32e04;stroke:#000000;stroke-width:30px;" transform="scale(0.03,0.03)"
          d="M750 2700 c-89 -21 -171 -81 -210 -154 -18 -32 -22 -56 -21 -125 0 -74 5 -97 38 -180 86 -218 101 -303 72 -405 -19 -62 -255 -540 -329 -665 -25
             -41 -44 -76 -43 -77 0 0 138 -46 306 -102 168 -55 380 -127 472 -159 l168 -59 6 36 c36 206 97 440 160 608 48 130 76 183 140 272 65 89 89 160 80 239 -11
             92 -47 152 -175 285 -64 68 -159 181 -210 252 -123 171 -163 212 -225 230 -54 16 -169 18 -229 4z"/>

<path style="fill:#c32e04;stroke:#000000;stroke-width:0.1px;" d="M25,3 l3,-3 l2,5 l-3,3z" /> 

   <path  style="fill:white;stroke:#000000;stroke-width:1px;" d="M5,17 l26,-12 c3,-1 8,4 5,20 l-26,12 c-3,1 -12,-14 -5,-20z"/>
 </symbol>

</defs>

<g id="dec01" transform="translate(150,130) rotate(-10)"> 

 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Validierungs-Stylesheet">
 <use href="#stern5" class="eins" />
 <text x="60" y="56">1</text>
 </a>

</g>

<g id="dec02" transform="translate(520,70) rotate(-20)"> 

 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/Gestaltung_mit_CSS#mehrere_Hintergrundbilder">
 <use href="#stern6" class="vier" />
 <text x="30" y="34">2</text>
 </a>

</g>

<g id="dec03" transform="translate(450,150) rotate(22)"> 

 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Initialen">
 <use href="#stern8" class="drei"/>
 <text x="27" y="34">3</text>
 </a>

</g>

<g id="dec05" transform="translate(50,0)"> 

 <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Dateiorganisation">
 <use href="#stern5"  class="vier" />
 <text x="60" y="56">5</text>
 </a>

</g>

<g id="dec06" transform="translate(500,140) rotate(-20)"> 

 <a href="https://wiki.selfhtml.org/wiki/Formulare/Gestaltung_mit_CSS#Wartungsfreundliches_CSS">
 <use href="#stern6" class="five" />
 <text x="30" y="34">6</text>
 </a>

</g>

<g id="dec08" transform="translate(450,270) rotate(0)"> 

 <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg">
 <use href="#stern8" class="five"/>
 <text x="27" y="34">8</text>
 </a>

</g>

<g id="dec09" transform="translate(220,70) rotate(-20)"> 

 <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM">
 <use href="#stern6" class="vier" />
 <text x="30" y="34">9</text>
 </a>

</g>

<g id="dec10" transform="translate(20,20) rotate(10)"> 

 <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor">
 <use href="#stern6" class="drei" />
 <text x="30" y="34">10</text>
 </a>

</g>

<g id="dec12" transform="translate(10,330) rotate(-7)"> 

 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid">
 <use href="#stern6" class="five"/>
 <text x="27" y="34">12</text>
 </a>

</g>

<g id="dec13" transform="translate(20,170) rotate(-20)"> 

 <a href="https://wiki.selfhtml.org/wiki/Farbe">
 <use href="#stern6" class="vier" />
 <text x="30" y="34">13</text>
 </a>

</g>

<g id="dec14" transform="translate(100,100) rotate(10)"> 

 <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet">
 <use href="#stern6" class="six"/>
 <text x="30" y="34">14</text>
 </a>

</g>

<g id="dec15" transform="translate(530,330) rotate(22)"> 

 <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/animierte Textpfade">
 <use href="#stern8" class="drei"/>
 <text x="27" y="34">15</text>
 </a>

</g>

<g id="dec17" transform="translate(370,20) rotate(-10)"> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox"> 

 <use href="#stern5"  class="vier" />
 <text x="60" y="56">17</text></a>

</g>

<g id="dec18" transform="translate(15,220) rotate(-10)"> <a href="https://wiki.selfhtml.org/wiki/Multimedia"> 

 <use href="#stern5" class="eins" />
 <text x="60" y="56">18</text>

</a> </g>

<g id="dec19" transform="translate(150,20) rotate(-10)"> <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-text-filter-6.html"> 

 <use href="#stern6" class="five" />
 <text x="30" y="34">19</text></a>

</g>

<g id="dec20" transform="translate(130,300) rotate(22)"> <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Muster/unregelm%C3%A4%C3%9Fige_Muster#Ton.2C_Steine_Erden"> 

 <use href="#stern8" class="drei"/>
 <text x="27" y="34">20</text>

</a> </g>


<g id="dec22" transform="translate(300,0) rotate(10)"> <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren"> 

 <use href="#stern6" class="zwei" />
 <text x="30" y="34">22</text>

</a> </g>


<g id="dec23" transform="translate(500,180) rotate(10)"> <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren"> 

 <use href="#stern5" class="six" />
 <text x="60" y="56">23</text>

</a> </g>


<g id="dec24" transform="translate(300,100) rotate(10)"> <a href="https://blog.selfhtml.org/2017/dec/24/weihnachtsbrief-2017"> 

 <use href="#stern6" fill="yellow" stroke="black" stroke-width="1"/>
 <path d="M47,20 l50,-20 l-10,15 l10,10 l-10,10 l10,10 l-50,-10" fill="yellow" stroke="black" stroke-width="1"/>
 <text x="30" y="34">24</text></a>

</g>

<svg x="200" y="220" width="200" height="200" viewBox="0 0 490 555" > 

 <defs>
   <linearGradient id="m" x1="1.4" x2="0.6" y1="1" y2="0.8" href="#a"/>
   <linearGradient id="e" x1="1.3" x2="0.6" y1="2.1" y2="0.3" href="#a"/>
   <linearGradient id="n" x1="0" x2="1" y1="0.6" y2="0.4" href="#b"/>
   <linearGradient id="p" x1="0.5" x2="0.5" y1="1" y2="0" href="#b"/>
   <linearGradient id="o" x1="0.2" x2="0.8" y1="0.8" y2="0.2" href="#b"/>
   <linearGradient id="l" x1="0.5" x2="0.4" y1="1.2" y2="0.6" href="#a"/>
   <linearGradient id="f" x1="0" x2="0.1" y1="1.7" y2="0.8" href="#a"/>
   <linearGradient id="k" x1="0.1" x2="0.2" y1="1.2" y2="0.6" href="#a"/>
   <linearGradient id="g" x1="0.9" x2="0.1" y1="0.8" y2="0.2" href="#b"/>
   <linearGradient id="i" x1="-0.7" x2="0.4" y1="1.7" y2="0.4" href="#a"/>
   <linearGradient id="j" x1="-0.2" x2="0.5" y1="0.6" y2="0.4" href="#a"/>
   <linearGradient id="h" x1="-0.1" x2="0.4" y1="1.4" y2="0.5" href="#a"/>
   <linearGradient id="q" x1="0.9" x2="0.1" y1="0.8" y2="0.2" href="#b"/>
   <linearGradient id="a">
     <stop stop-color="#fff" offset="0"/>
     <stop stop-color="#fff" stop-opacity="0" offset="1"/>
   </linearGradient>
   <linearGradient id="r" x1="0.2" x2="0.5" y1="0.9" y2="0.2" href="#d"/>
   <linearGradient id="b">
     <stop stop-color="#fff" stop-opacity="0.4" offset="0"/>
     <stop stop-color="#fff" stop-opacity="0" offset="1"/>
   </linearGradient>
   <linearGradient id="d">
     <stop stop-color="#dc0000" offset="0"/>
     <stop stop-color="#ffb200" offset="1"/>
   </linearGradient>
   <linearGradient id="x" x1="0.1" x2="0.9" y1="0.5" y2="0.5" href="#b"/>
   <linearGradient id="s" x1="0.7" x2="0.5" y1="0.9" y2="0.5" href="#d"/>
   <linearGradient id="w" x1="0.3" x2="0.5" y1="1.3" y2="0.4" href="#d"/>
   <linearGradient id="t" x1="-0.5" x2="0.5" y1="1.2" y2="0.4" href="#a"/>
   <linearGradient id="u" x1="0.1" x2="0.9" y1="0.5" y2="0.5" href="#b"/>
   <linearGradient id="v" x1="0.2" x2="0.8" y1="0.9" y2="0.1" href="#d"/>
   <linearGradient id="c" x1="-0.6" x2="0.3" y1="0.1" y2="1" href="#a"/>
 </defs>

  <rect x="0" y="0" width="490" height="50" fill="#666" stroke="black" stroke-width="5"/>
 <rect x="0" y="50" width="50" height="455" fill="#666" stroke="black" stroke-width="5"/>
 <rect x="440" y="50" width="50" height="455" fill="#666" stroke="black" stroke-width="5"/>
 <rect x="50" y="50" width="390" height="455" fill="black" stroke="pink" stroke-width="1"/> 

 <g stroke-linejoin="bevel" stroke-opacity="0.3">
   <g stroke="#000" stroke-width="1.9">
     <path d="m362.2 443l-77.1-44.2 13-10.4 77.1 19.1-13 35.5zM352.4 415.5" fill="#924b00" fill-rule="evenodd"/>
     <path d="m352.4 415.5c5.3-8.9 15.7-12.3 23.3-7.4 7.5 4.8 9.3 16 4 24.9-5.3 8.9-15.7 12.3-23.3 7.4-7.5-4.8-9.3-16-4-24.9z" fill="#c15300"/>
     <path d="m366.9 425.4c0.6-0.5 0.9 0.6 0.7 1.1-0.4 1.2-1.9 1.2-2.7 0.6-1.5-1.1-1.4-3.5-0.3-4.8 1.6-2 4.4-1.8 6.1 0 2.2 2.3 1.9 6.3-0.2 8.6-2.6 2.9-7 2.4-9.5-0.5-3-3.5-2.5-9.2 0.6-12.3 3.7-3.7 9.6-3.1 12.9 1 3.8 4.7 3.1 12-1.1 16.1-4.8 4.6-12.2 3.7-16.4-1.5-4.6-5.9-3.7-14.9 1.5-19.9 5.8-5.5 14.8-4.4 19.8 2" fill="none"/>
   </g>
   <path d="m365.5 417.9c3.1-6.3 9-8.6 13.4-5.2 4.3 3.4 5.4 11.3 2.3 17.5-3.1 6.3-9 8.6-13.4 5.2-4.3-3.4-5.4-11.3-2.3-17.5z" fill="url(#g)" stroke-width="1.7"/>
   <g stroke="#000" stroke-width="1.9">
     <g fill="#924b00" fill-rule="evenodd">
       <path d="m104 408.4l50.2-13.9 39.9 3.5-71.9 52-6.9-15.6-11.3-26zM159.4 463"/>
       <path d="m159.4 463l18.2 17.3 32.9-48.5-9.5-9.5-14.7-1.7-41.6 35.5 14.7 6.9z"/>
       <path d="m254.7 476.8l13.9-5.2-26.9-97-16.5 11.3 1.7 96.2 27.7-5.2z"/>
       <path d="m310.8 477.4l-10.4-3.5-50.2-66.7 14.7-8.7 64.1 50.2-15.6 11.3-2.6 17.3z"/>
     </g>
     <g fill="#c15300">
       <path d="m127.8 424.1c4 12 0.1 24.2-8.7 27.2-8.8 3.1-19.3-4.1-23.3-16.1-4-12-0.1-24.2 8.7-27.2 8.8-3.1 19.3 4.1 23.3 16.1zM172.6 457.1"/>
       <path d="m172.6 457.1c8.4 8.2 10.2 20 4.1 26.3-6.2 6.3-18 4.7-26.4-3.5-8.4-8.2-10.2-20-4.1-26.3 6.2-6.3 18-4.7 26.4 3.5z"/>
       <path d="m247.6 458.6c12.1-0.3 22.1 7.8 22.3 18 0.2 10.2-9.5 18.8-21.6 19.1-12.1 0.3-22.1-7.8-22.3-18-0.2-10.2 9.5-18.8 21.6-19.1z"/>
       <path d="m302.7 454.6c5.4-9.3 16-12.7 23.6-7.7 7.6 5 9.5 16.6 4.1 25.8s-16 12.7-23.6 7.7c-7.6-5-9.5-16.6-4.1-25.8z"/>
     </g>
   </g>
 </g>
 <g fill-rule="evenodd">
   <g stroke="#000">
     <g stroke-opacity="0.2" stroke-width="1.4">
       <g fill="#994200">
         <path d="m147.4 383.6l45-25.4 24.3 16.5-22.5 31-18.3 10.6-28.5-32.6zM178.6 420.7"/>
         <path d="m178.6 420.7l29.4-46.9 34.7-8.7v19.9l-22.5 50.2-41.5-14.6z"/>
       </g>
       <g fill="#c15300">
         <path d="m147.3 383.3l-5.1 9.8 33.7 23.1 3.8-14-32.3-18.9zM219.6 423.5"/>
         <path d="m219.6 423.5l0.4 10.8-42.5-2.6 1.3-11.2 40.7 3z"/>
       </g>
     </g>
     <g fill="none" stroke-linejoin="bevel" stroke-opacity="0.3" stroke-width="1.9">
       <path d="m109.4 428.4c0.1 0.9-0.9 0.4-1.2-0.1-0.8-1.3-0.1-2.7 0.7-3.1 1.5-0.6 3.3 1.2 3.9 3.3 0.9 3-0.5 5.7-2.6 6.1-2.8 0.5-5.8-2.7-6.7-6.5-1.1-4.7 1.2-8.7 4.5-9.1 4.1-0.4 8.3 4.2 9.4 9.7 1.3 6.4-1.8 11.8-6.4 12.1-5.3 0.3-10.8-5.7-12.1-12.9-1.5-8.1 2.4-14.9 8.3-15.1 6.6-0.3 13.3 7.3 14.9 16.1 1.8 9.8-3.1 17.9-10.2 18.1M159.2 468.2"/>
       <path d="m159.2 468.2c0.6 0.7-0.5 0.8-1 0.6-1.3-0.7-1.6-2.2-1.1-3 0.9-1.3 3.4-0.8 5.1 0.6 2.4 2.1 2.7 5.1 1.1 6.5-2.1 1.9-6.3 0.9-9.1-1.8-3.5-3.4-3.8-8-1.2-10.1 3.2-2.6 9.3-1 13.2 3 4.6 4.7 4.9 10.9 1.2 13.6-4.3 3.2-12.2 1.1-17.2-4.2-5.7-6-6.1-13.8-1.3-17.2 5.4-3.9 15.1-1.2 21.3 5.3 6.9 7.3 7.2 16.7 1.3 20.8"/>
       <path d="m246.7 478.3c0.8 0.2 0.1 1.1-0.4 1.2-1.3 0.3-2.3-1-2.3-2 0-1.9 2-3 3.9-2.8 2.8 0.3 4.5 2.8 4.2 5.2-0.5 3.2-4 5-7.4 4.5-4.2-0.7-6.8-4.7-6-8.4 0.9-4.5 6-7.1 10.8-6.1 5.7 1.2 9.1 6.6 7.9 11.7-1.4 5.8-8 9.1-14.3 7.7-7.1-1.6-11.4-8.5-9.8-14.9 1.8-7.1 10.1-11.2 17.8-9.3 8.6 2.1 13.7 10.4 11.7 18.1"/>
       <path d="m317 463.9c0.6-0.3 0.5 0.8 0.3 1.1-0.6 0.9-1.7 0.5-2.2-0.3-0.8-1.3 0-3.3 1.2-4.2 1.8-1.3 3.8-0.3 4.6 1.6 1 2.6-0.3 5.9-2.6 7.2-2.8 1.7-6 0.1-7-3-1.3-3.8 0.7-8.5 4-10.3 3.9-2.2 8.1 0 9.4 4.4 1.5 5-1.1 11.1-5.4 13.4-4.9 2.6-10.2-0.2-11.8-5.7-1.8-6.2 1.4-13.7 6.8-16.4 5.9-3.1 12.4 0.3 14.3 7.1"/>
     </g>
   </g>
   <g stroke-opacity="0.2" stroke-width="1.4">
     <path d="m220.3 422.5l1.3 12.6-43.4-4.4 1.3-11.2 40.7 3zM180.4 419.6" fill="url(#h)"/>
     <path d="m180.4 419.6l18.9-31.7 7.7 0.9 21.3 12.7-9.1 21.8-38.8-3.8z" fill="url(#i)"/>
     <path d="m177.3 403.3l-1.8 11.6-32.2-22 5.3-10 28.7 20.4z" fill="url(#j)"/>
     <path d="m152 401.9c6.5 4.1 13 8.2 19.5 12.2-14.4 9.9-27.6 18.9-43.3 29.7 2.9-8 3.2-17.2-1-24.9 10.5-1.8 17.5-5.9 24.8-17.1z" fill="url(#k)"/>
     <path d="m183.6 433c9.1 0.6 15 0.3 24.5 1.3-9.5 13.9-15.3 23-27.3 38.9 0-8.5-4.8-17-11.4-22.7 9.2-5.3 11.2-4.5 14.2-17.5z" fill="url(#l)"/>
     <path d="m236.1 407.2c7.7 5.6 12.2 7.4 16.7 9.8 4.2 17 8 28.6 12.6 47.2-6.5-5.5-15-9-23.6-7.8 2-10.5 2.2-38.4-5.7-49.2z" fill="url(#m)"/>
   </g>
 </g>
 <g stroke-linejoin="bevel" stroke-opacity="0.3">
   <path d="m112.7 424.8c2.2 8.4 0.1 17-4.8 19.2-4.8 2.2-10.5-2.9-12.7-11.3-2.2-8.4-0.1-17 4.8-19.2 4.8-2.2 10.5 2.9 12.7 11.3zM160.1 460.5" fill="url(#n)" stroke-width="1.5"/>
   <path d="m160.1 460.5c4.8 5.8 5.9 14.1 2.3 18.5-3.6 4.4-10.4 3.3-15.2-2.4-4.8-5.8-5.9-14.1-2.3-18.5 3.6-4.4 10.4-3.3 15.2 2.4z" fill="url(#o)" stroke-width="1.6"/>
   <path d="m248.3 469.5c9.9-0.2 18.1 5.5 18.3 12.7s-7.8 13.2-17.7 13.4c-9.9 0.2-18.1-5.5-18.3-12.7-0.2-7.2 7.8-13.2 17.7-13.4z" fill="url(#p)" stroke-width="1.4"/>
   <path d="m314.1 459.6c3.4-6.5 10.1-8.9 15-5.4 4.8 3.5 6 11.7 2.6 18.2-3.4 6.5-10.1 8.9-15 5.4-4.8-3.5-6-11.7-2.6-18.2z" fill="url(#q)" stroke-width="1.6"/>
 </g>
 <g fill-rule="evenodd">
   <g stroke-opacity="0.5" stroke-width="2.2">
     <path d="m147.3 307c19.3 57.2 50 87.5 104.8 91 60.4 19.3 116.4-20.2 100.5-82.3-7.2 13.3-11.8 20.5-24.3 24.3 4.9-34.4-26.6-40.1-11.3-77.1 10.7-22.8 17-50.8-1.7-73.6-7.8 26-17.3 43.3-36.4 62.4 2-31.8 18.8-57.5 8.7-87.5 1.4-20.2-31.8-19.6-32.1-81.4-21.1 26.6-30 47.1-26.9 87.5-7.8 32.6-26.9 44.5-23.4 79.7-2.9-19.6-4.9-36.7-0.9-51.1-2.3-17.9-4.6-33.2-22.5-45.9 5.5 22.2 11.8 55.7-6.9 64.1-5.2 10.7-31.2 47.4-2.6 104.8-8.4-4.9-16.7-6.4-25.1-14.7zM249.3 95.1" fill="url(#r)" stroke="#ff0"/>
     <path d="m249.3 95.1c-15 19.7-21.4 44.8-19.4 69.3 1.4 12-4.9 23.1-9.5 33.9-8.3 16-15.9 33.4-13.6 51.8-0.7 10.6-5.4-0.1-4.9-5.4-2.3-15-3.2-30.6-0.1-45.5-1.6-14.5-5.2-30.2-17.2-39.7 3.6 17.2 8.2 36.6-0.4 53-3.1 5.5-10 7-11.4 13.6-14.4 25.3-15.5 56.8-4.6 83.6 2.3 6.1 5.3 11.9 7.8 17.9-8-4.6-16.9-7.7-24.7-12.7 10.8 31.5 31.3 62.6 63.6 74.9 12.7 5.4 26.6 6.4 40 8.6 29.5 9.2 66 3.2 85.4-22.5 11.4-14.8 14.6-34.8 10.7-52.9-5.1 10.4-14.1 18.8-25.6 21.5 2.6-13.4-1.4-26.7-8.3-38.1-7.4-12.2-9.2-27.6-3.3-40.8 9-19.8 15.8-43.7 5.3-64.3-3.2-9.5-5.5-3.7-7.2 3.1-6.9 21.1-20.7 39.1-36.4 54.5 1.1-21.5 8.6-41.9 11.8-63.1 1.8-10.8-0.3-21.6-2.5-32.1-1.5-11.7-13.8-17.8-18.9-27.8-9.2-13.4-12.3-30-12.8-46-1.3 1.8-2.6 3.5-4 5.3z" fill="url(#c)"/>
     <g stroke="#ff0">
       <path d="m246.1 389.3c-45.9-48.5-53.7-82.3-23.4-114.3 34.1-60.6 25.7-98.8 0.9-135.1 23.4 80.6-27.7 132.6-44.2 155.9-9.8-30.3-1.4-43.3 12.1-80.6-26.6 28.9-42.7 63.8-32.9 97 17.9 50 60.1 60.9 87.5 77.1zM301.8 206" fill="url(#s)"/>
       <path d="m301.8 206c-6.2-17.9-1.1-21.7 4.3-29.6 5.6-2.2 3.9-9.7 6.9-26.5 4.6 18.8 16.9 27.3-11.2 56.1z" fill="#ffd700"/>
     </g>
   </g>
   <path d="m180.2 402.4l13.1-5.9M149.4 383.7" fill="none" stroke="#000" stroke-opacity="0.2" stroke-width="1.4"/>
   <path d="m149.4 383.7l27-14.9 22.1 17.7-5.4 9.1-13.8 5.9-29.8-17.9z" fill="url(#t)" stroke-opacity="0.2" stroke-width="1.4"/>
   <path d="m308.7 147c-1.9 8-1 16.8-4.5 24.2-8.1 6.2-11.7 17.8-8.1 27.6 1.1 8.2 3.7 9.6 8.2 2.1 9.7-10 18.8-24.4 13.3-38.7-2.5-7.3-4.7-14.7-7.5-22-0.5 2.3-1 4.5-1.4 6.8z" fill="url(#u)" stroke-opacity="0.5" stroke-width="2.2"/>
   <g stroke="#000">
     <path d="m210.6 383.3l64.1 43.3 30.3-14.7-76.2-41.6-21.7 6.1 3.5 6.9zM219.4 423" fill="#994200" stroke-opacity="0.2" stroke-width="1.4"/>
     <path d="m219.4 423l10.3-21" fill="none" stroke-opacity="0.2" stroke-width="1.4"/>
   </g>
   <g stroke-width="1.4">
     <path d="m207.5 381.7l64.1 43.3 30.3-14.7-76.2-41.6-21.7 6.1 3.5 6.9zM204.1 374.3" fill="url(#c)" stroke-opacity="0.5"/>
     <path d="m204.1 374.3v10.4l67.6 44.2 30.3-8.7v-11.3l-27.7 8.7-70.2-43.3z" fill="#c15300" stroke="#000" stroke-opacity="0.2"/>
   </g>
   <g stroke="#000">
     <g stroke-opacity="0.2" stroke-width="1.4">
       <path d="m365.4 356.2l-59-3.5-20.7 22.5 67.9 8.8 11.8-27.8zM346.4 377.6" fill="#994200"/>
       <path d="m346.4 377.6l6.8 7.2 19.4-21.5-7.3-8-18.9 22.3z" fill="#c15300"/>
     </g>
     <path d="m347.2 377.6l-46.3-6.3" fill="none" stroke-opacity="0.2" stroke-width="1.4"/>
   </g>
   <g stroke-opacity="0.2" stroke-width="1.4">
     <path d="m365.8 356.4l5.8 7-18.4 20.8-6.4-7.2 18.9-20.5zM346.1 377" fill="url(#f)"/>
     <path d="m346.1 377l-39-5.7 24-16.3 15.8 0.7 16.4 0.7-17.1 20.6z" fill="url(#e)"/>
   </g>
   <g stroke-opacity="0.5" stroke-width="2.2">
     <g stroke="#ff0">
       <path d="m341.4 315.7c15.9-15.3 12.7-21.9 11.3-32.9-4.6-5.2 1.2-12.1 6.9-31.2-14.7 17-32.1 19.3-18.2 64.1zM266.9 389.3" fill="#ffd700"/>
       <path d="m266.9 389.3c17.9-10.1 22.8-41.9 25.1-77.1 4.3-34.1 13-68.1 70.2-73.6-23.4 18.8-42.4 41.9-33.8 84.9-2.3 62.7-48.8 60.4-61.5 65.8z" fill="url(#v)"/>
     </g>
     <path d="m355.6 233.6c-24.4 3.5-49.5 18.1-56.7 43-11.5 31.1-5.1 66.5-20.8 96.4-5.9 2.6-4.5 13.7 2.9 11.5 21.5-3.9 41.9-18.8 47.4-40.8 5.3-15.2 2.3-31.3 1.7-47 0.7-22.7 13.9-43.2 31.1-57.2 3-4.3-2-5.8-5.6-5.9zM355.9 245.5" fill="url(#c)"/>
     <path d="m355.9 245.5c-9.8 10.4-24.1 20.1-23.7 36.1-0.7 11.5 3.4 22.4 5.9 33.4 8.5-8.1 18.2-18.7 15.1-31.6 0-5.7-4.3-10.6-0.9-16.1 3.2-8.7 6.6-17.4 8.8-26.5-1.7 1.6-3.4 3.1-5.1 4.7z" fill="url(#c)"/>
     <g stroke="#ff0">
       <path d="m235.7 365.9c-2.3-27.7-5.5-47.6 29.5-72.8 59.2-41.3 30-65.3-6.9-108.3 11 42.7-6.6 76.8-21.7 99.6-9.8 14.2-43.9 43-0.9 81.4zM213.1 162.6" fill="url(#w)"/>
       <path d="m213.1 162.6c16-18.4 11.9-26 9.3-38.7-5.6-5.8 0.1-14.1 4.7-36.5-14.6 20.4-33.3 23.8-14 75.1z" fill="#ffd700"/>
     </g>
     <path d="m223.2 83.5c-9.3 12.2-23.4 23.4-22.7 40.3-0.1 14 5.4 27.1 9.6 40.3 8.4-9.6 17.4-21.9 13.7-35.4 0-5.4-3.7-9.5-3.8-14.6 2.1-12 6.3-23.5 8-35.6-1.6 1.7-3.1 3.4-4.7 5.1zM257.3 177.7" fill="url(#x)"/>
     <path d="m257.3 177.7c6.4 29.1-0.2 59.8-14.9 85.4-9.2 17.6-27.2 31.1-28.9 52-2.8 18.2 10.4 33.5 22.6 45.2 5 6.2 0.7-8.5 1.4-12-2-17.9 1.1-38.1 15.6-50.4 16.1-15.7 39.1-26.6 46.8-49.1 5.2-19.9-8.7-37.8-20.8-51.9-7.3-8.9-15-17.4-22.7-26 0.3 2.2 0.7 4.5 1 6.7z" fill="url(#c)"/>
     <path d="m196.2 161.9c0.6 13.8 4.6 27.4 2.8 41.3-1.6 32.5-15.8 63-35.5 88.4-3.7 5.2-7.5 10.2-11.3 15.3-5-16.8-2.8-34.9 4-50.8 3.6-8.5 6.1-17.3 7.4-26.5-18.8 17.2-32.1 40.6-36.8 65.6-3.8 23.2 4.4 47 19.7 64.4 19.3 22.8 47.1 35.6 74.1 47.1-15.3-21.5-36.5-40.8-41-68-3.1-15.7 3.1-31.6 13.5-43.3 11.8-16.3 19.2-35.6 23.6-55.1 5.7-25.4 1.1-52.9-12.8-75-3.4-2.5-9.6-15.7-7.6-3.5z" fill="url(#c)"/>
   </g>
 </g>

</svg>

<g id="dec21" transform="translate(170,170) rotate(50)"> 

 <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps">
 <use href="#stocking" fill="yellow" stroke="black" stroke-width="1"/>
 <text transform="translate(32,55)rotate(-20)" x="0" y="0">21</text>
 </a>

</g>

<g id="dec023" transform="translate(210,190) rotate(25)"> 

 <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps">
 <use href="#stocking" fill="yellow" stroke="black" stroke-width="1"/>
 <text transform="translate(32,55)rotate(-20)" x="0" y="0">11</text>
 </a>

</g>

<g id="dec07" transform="translate(250,200) rotate(10)"> 

 <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg">
 <use href="#stocking" fill="yellow" stroke="black" stroke-width="1"/>
 <text transform="translate(32,55)rotate(-20)" x="0" y="0">7</text>
 </a>

</g>

<g id="dec016" transform="translate(300,200) rotate(0)"> 

 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox">
 <use href="#stocking" fill="yellow" stroke="black" stroke-width="1"/>
 <text transform="translate(32,55)rotate(-20)" x="0" y="0">16</text>
 </a>

</g>

<g id="dec04" transform="translate(350,190) rotate(-15)"> 

 <a href="https://wiki.selfhtml.org/wiki/Typografie/Spalten">
 <use href="#stocking" fill="yellow" stroke="black" stroke-width="1"/>
 <text transform="translate(32,55)rotate(-20)" x="0" y="0">4</text>
 </a>

</g>

</svg> </body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Advent-2017.html&oldid=100196“