Beispiel:SVG-anw-Zauberhand-1.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">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
path {
  stroke: #337599;
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 600 600;
  animation: strokeAni 5s infinite linear;
}
 
@keyframes strokeAni {
	0% {
		stroke-dashoffset: 600;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
  </style>
  <title>Beispiel: Schrift von Zauberhand</title>
</head>
 
<body>
  <h1>Beispiel: Schrift von Zauberhand - 1</h1>

<svg viewBox="0 0 980 200">
  <path d="M20,30 c-5,30 5,60 0,90 m30,-33 a16,16 1 1,0 0,33 c30,0 35,-50 35,-77  s-25,-10 -25,10 0,15 
           10,33 20,15 15,35 
           m60,-90 c-5,30 5,60 0,90 m17,-50 c0,-5 5,-5 10,0 s0,10 0,10 s-5,5 -12,-7 
	   m0,20 v20 c0,8 20,5 30,-10 s -5,-10 -10,0 0,20 25,10 c10,-10 15,-20 10,-50 s-10,-10 -12,0 0,20   
           13,40 c10,-10 20,-20 20,3 s -10,10 -20,3
	   m28,-0 c10,0 20,-20 10,-20 c0,0 -5,-0 -10,5 s0,20 10,22 s5,0 10,-3 
	   m105,-70 c-15,-15 -35,-20 -40,25 c5,25 10,15 15,30 s-20,30 -35,10
	   m40,0 c0,8 20,5 20,-10 s-15,-15 -15,3 10,22 25,10 c10,-10 15,-20 20,-50 s-25,-45 -16,0 3,25 
           10,40 c10,23 20,23 35,-10 s10,-30 9,-45 c-10,-20, -20,-20 -20,0 c-5,30 5,60 0,90
	   m-5,-20 c0,0 0,0 20,-05
	   m20,-80 c-5,30 5,60 0,90 m0,-42 c5,5 10,0 25,5 m0,-53 c-5,25 0,60 0,90 m10,-90 c5,5 10,0 45,5 
           m-22,-3 c-5,25 0,55 0,85 m20,0 c5,-25 5,-55 10,-85 c30,30 0,30 30,5c-7,25 0,55 -10,80
	   m25,-85 c0,25 -5,55 -10,80 c10,3 20,0 35,-5
	   m10,40 c0,-10 10,-10 20,0 s0,20 0,20 s-10,10 -25,-15 m30,-30 c1,1 0,0 20,-80 s-30,-20 -40,5 
           c-8,35 -5,40 -5,50 s 15,40 25,25" />

</svg>
<p>Der gesamte Satz ist in einem Pfad zusammengefasst. Trotzdem beginnt das in <code>stroke-dasharray</code> festgelegte Strichmuster bei jedem Neuansetzen des Stifts,  z.&nbsp;B. beim m-Befehl (<em>moveTo</em>) wieder von Neuem.</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-anw-Zauberhand-1.html&oldid=86832“