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" />
  <link rel="stylesheet" media="screen" href="1-aktuell/Beispiel-Grundlayout.css" /> 
  <style>
svg { 
  height: 300px;
  }
  </style>
  <title>Beispiel: animierte Handschrift</title>
</head>
 
<body>
  <h1>Beispiel: animierte Handschrift - 1</h1>
 
  <main>
  <svg viewbox="0 0 880 300">
  <title>Der prim</title>

  <defs>


  </defs>
  <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" 
         stroke="black" stroke-width="3" fill="none"  
         stroke-dasharray="600 600" stroke-dashoffset="0">
     <animate 
	     attributeName="stroke-dashoffset" 
	     attributeType="XML"
             from="600" to="0" 
	     dur="20s"  
	     repeatCount="indefinite" />
  </path>

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