Beispiel:SVG-Anw-Muster-5.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
padding:0;
background:white;
width:95%;
height: 450px;
}
</style>
<title>Muster - Kies und Steine</title>
</head>
<body>
<h1>Muster - Kies und Steine</h1>
<svg viewBox="0 0 900 450">
<desc>verschiedene Muster für Kies und unregelmäßige Steinmuster</desc>
<defs>
<pattern id="kies-1" x="20" y="20" width="20" height="20" fill="none" stroke="black" stroke-width=".5" patternUnits="userSpaceOnUse">
<rect width="20" height="20" fill="#c6bbb5" stroke-width="0" stroke="pink"></rect>
<circle cx="5" cy ="7" r="1" />
<circle cx="5" cy ="17" r="1" />
<circle cx="17" cy ="5" r="1" />
<circle cx="13" cy ="13" r="1" />
<rect x="2" y="2" width="1" height="1" />
<rect x="10" y="8" width="1" height="1" />
<rect x="16" y="12" width="1" height="1" />
<rect x="4" y="12" width="1" height="1" />
<rect x="18" y="18" width="1" height="1" />
<rect x="13" y="16" width="1" height="1" />
</pattern>
<pattern id="kies-2" stroke="black" stroke-width=".5" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="#c6bbb5" stroke-width="0" stroke="pink"></rect>
<symbol id="kiesel-0">
<path d="M5,20 c-2,-4 -2,-8 -1,-12 c3-2,5-6,10-4c4,2.3,6.3,6.4,0,12 c0,0 -6,10 -9,4"/>
</symbol>
<symbol id="kiesel-1">
<path d="M5,15 c-5,-10 10,-20 20,-5 c5,5 0,20 -9,14 z"/>
</symbol>
<symbol id="kiesel-2">
<path d="M5,15 c-5,-10 10,-20 20,-5 l5,7 c5,5 0,20 -9,14 c-10,-5 0,-5 -15,-15 z"/>
</symbol>
<symbol id="kiesel-3">
<path d="M5,20 C3,16 7,15 8,11 11,9 9,2 14,4 c4,8 8.4,4 9,16.3 0,0 -11.5,6.6 -18,-0.3"/>
</symbol>
<symbol id="kiesel-4">
<path d="m 10,15 c -5,-10 15.5,-20 12,-5 -1,3.4 2,10 -6,6 z"/>
</symbol>
<symbol id="kiesel-5">
<path d="m10,12 c-0,-5 3,-1.75 4,-6 5.7,1.4 0.36,-1.33 5,1 4.35,8 -2,9 -2,9 0,0 -2,2 -7,-4"/>
</symbol>
<symbol id="kiesel-6">
<path d="m3,15 C-1,8 12,-2.5 12.6,6.8 12,9 12,13 3,15 "/>
</symbol>
<use href="#kiesel-0" x="1" y="1" fill="#9c8c7d"/>
<use href="#kiesel-0" x="29" y="15" fill="#f7e7d7"/>
<use href="#kiesel-0" x="54" y="90" fill="#937962"/>
<use href="#kiesel-0" x="54" y="-10" fill="#937962"/>
<use href="#kiesel-1" x="0" y="70" fill="#e5d3bd"/>
<use href="#kiesel-1" x="-15" y="40" fill="#e5d3bd"/>
<use href="#kiesel-1" x="38" y="48" fill="#937962"/>
<use href="#kiesel-1" x="85" y="40" fill="#e5d3bd"/>
<use href="#kiesel-1" x="65" y="0" fill="#f7e7d7"/>
<use href="#kiesel-2" x="15" y="55" fill="#c7b29f"/>
<use href="#kiesel-2" x="45" y="12" fill="#e5d3bd"/>
<use href="#kiesel-3" x="88" y="15" fill="#f7e7d7"/>
<use href="#kiesel-3" x="-12" y="15" fill="#f7e7d7"/>
<use href="#kiesel-3" x="40" y="72" fill="#f7e7d7"/>
<use href="#kiesel-3" x="36" y="26" fill="#f7e7d7"/>
<use href="#kiesel-3" x="75" y="75" fill="#e5d3bd"/>
<use href="#kiesel-4" x="69" y="25" fill="#937962"/>
<use href="#kiesel-4" x="18" y="88" fill="#e5d3bd"/>
<use href="#kiesel-4" x="18" y="-12" fill="#e5d3bd"/>
<use href="#kiesel-4" x="5" y="15" fill="#f7e7d7"/>
<use href="#kiesel-5" x="10" y="0" fill="#c7b29f"/>
<use href="#kiesel-5" x="-3" y="31" fill="#f7e7d7"/>
<use href="#kiesel-5" x="63" y="36" fill="#f7e7d7"/>
<use href="#kiesel-5" x="35" y="-3" fill="#f7e7d7"/>
<use href="#kiesel-5" x="20" y="40" fill="#c7b29f"/>
<use href="#kiesel-5" x="55" y="77" fill="#c7b29f"/>
<use href="#kiesel-5" x="78" y="60" fill="#e5d3bd"/>
<use href="#kiesel-5" x="50" y="40" fill="#e5d3bd"/>
<use href="#kiesel-6" x="30" y="3" fill="#e5d3bd"/>
<use href="#kiesel-6" x="20" y="30" fill="#c7b29f"/>
<use href="#kiesel-6" x="0" y="-10" fill="#937962"/>
<use href="#kiesel-6" x="0" y="90" fill="#937962"/>
<use href="#kiesel-6" x="67" y="50" fill="#f7e7d7"/>
<use href="#kiesel-6" x="77" y="55" fill="#937962"/>
</pattern>
<pattern id="kies-3" width="100" height="100" stroke="black" stroke-width="1" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="100" height="100" fill="#977863" stroke-width="0" stroke="pink"/>
<symbol id="part-1">
<path d="m3,15 C-1,8 15,-7 23,8 18,22 10,28 3,15" />
</symbol>
<symbol id="part-2">
<path d="m10,20 l10,-13 12,-5 10,10 -14,20 -12,-6 z" />
</symbol>
<symbol id="part-3">
<path d="m10,20 l10,-13 h10 l6,7 -10,10 8,12 -10,10 8,12 -22,-6 8-20z" />
</symbol>
<symbol id="part-4">
<path d="m10,23 v-8 l10,-8 h10 l8-3 6,-4 5,10 3,9 -12,4 -6,-4 z" />
</symbol>
<symbol id="part-5">
<path d="m10,23 v-6 l8,-10 h5 l6,5 1,5 -5,11 h-8 -4,9 -6,-4 z" />
</symbol>
<symbol id="part-6">
<path d="m10,23 l18,-5 h5 l6,5 1,5 -5,11 h-8 l-4,-6 h-3 l-6,-4 z" />
</symbol>
<use href="#part-2" x="60" y="0" fill="#d8bca7"/>
<use href="#part-2" x="16" y="30" fill="#9d9996"/>
<use href="#part-2" x="-10" y="30" fill="#d8bca7"/>
<use href="#part-3" x="84" y="3" fill="#9d9996"/>
<use href="#part-3" x="-16" y="3" fill="#9d9996"/>
<use href="#part-1" x="-10" y="-10" fill="#deceac"/>
<use href="#part-1" x="-10" y="90" fill="#deceac"/>
<use href="#part-1" x="90" y="-10" fill="#deceac"/>
<use href="#part-1" x="90" y="90" fill="#deceac"/>
<use href="#part-4" x="5" y="-15" fill="#d8bca7"/>
<use href="#part-4" x="5" y="85" fill="#d8bca7"/>
<use href="#part-5" x="50" y="-20" fill="#deceac"/>
<use href="#part-5" x="50" y="80" fill="#deceac"/>
<use href="#part-5" x="68" y="27" fill="#deceac"/>
<use href="#part-5" x="8" y="50" fill="#ddcfac"/>
<use href="#part-6" x="5" y="-12" fill="#deceac"/>
<use href="#part-6" x="58" y="38" fill="#deceac"/>
<use href="#part-6" x="40" y="8" fill="#deceac"/>
<use href="#part-6" transform="translate(31,46) rotate(75)" fill="#c7b29f"/>
<use href="#part-1" x="33" y="63" fill="#d8bca7"/>
<use href="#part-1" x="48" y="46" fill="#c7b29f"/>
<use href="#part-2" transform="translate(46,66) scale(0.6,0.8)" fill="#9d9996"/>
<use href="#part-2" transform="translate(72,77) scale(0.6,0.7)" fill="#d8bca7"/>
</pattern>
</defs>
<rect id="eins" width="260" height="400" fill="url(#kies-1)" transform="translate(10,10)"/>
<rect id="zwei" width="260" height="400" fill="url(#kies-2)" transform="translate(290,10)"/>
<rect id="drei" width="260" height="400" fill="url(#kies-3)" transform="translate(570,10)"/>
<text x="10" y="430">unregelmäßige Punkte</text>
<text x="290" y="430">Mosaik aus runden Kieseln</text>
<text x="570" y="430">Mosaik aus gezackten Platten</text>
</svg>
</body></html>
