Beispiel:Shape-Morphing-9.html
<!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:Grundlayout.css" > <style>
svg {
width: 100%; height: 500px; padding:0; margin:0; background: white;
} </style>
<title>Shape-Morphing - 6</title>
</head>
<body> <svg viewBox="0 0 394 250">
<defs>
<radialGradient id="verlaufGruen" >
<stop offset="0%" stop-color="#05fb00" />
<stop offset="100%" stop-color="#5a9900" />
</radialGradient>
<radialGradient id="verlaufRot" >
<stop offset="0%" stop-color="#fb0000" />
<stop offset="100%" stop-color="#c32e04" />
</radialGradient>
</defs>
<path id="gruen-ost" fill="url(#verlaufGruen)" d="M 158 234 C 154 221 174 206 158 197 C 144 186 130 173 116 161 C 93 180 75 206 55 226 C 42 214 28 202 18 188 C 22 176 40 197 46 183 C 55 171 64 160 73 148 C 84 133 82 128 66 135 C 54 137 45 128 34 122 C 22 114 15 103 5 92 C 0 79 23 73 27 86 C 38 94 50 103 64 104 C 74 97 80 86 85 76 C 88 66 63 66 70 49 C 73 42 58 38 71 34 C 81 28 79 17 68 15 C 64 14 59 5 76 9 C 88 12 95 2 103 6 C 114 12 126 16 136 22 C 141 29 133 33 149 42 C 157 46 164 55 152 51 C 140 47 128 54 124 66 C 129 120 210 187 192 203 C 188 208 167 235 159 235 L 158 234 Z">
<animate attributeName="d" values="M 158 234 C 154 221 174 206 158 197 C 144 186 130 173 116 161 C 93 180 75 206 55 226 C 42 214 28 202 18 188 C 22 176 40 197 46 183 C 55 171 64 160 73 148 C 84 133 82 128 66 135 C 54 137 45 128 34 122 C 22 114 15 103 5 92 C 0 79 23 73 27 86 C 38 94 50 103 64 104 C 74 97 80 86 85 76 C 88 66 63 66 70 49 C 73 42 58 38 71 34 C 81 28 79 17 68 15 C 64 14 59 5 76 9 C 88 12 95 2 103 6 C 114 12 126 16 136 22 C 141 29 133 33 149 42 C 157 46 164 55 152 51 C 140 47 128 54 124 66 C 129 120 210 187 192 203 C 188 208 167 235 159 235 L 158 234 Z;
M 158 234 C 154 221 174 206 158 197 C 144 186 130 173 116 161 C 93 180 75 206 55 226 C 42 214 28 202 18 188 C 22 176 40 197 46 183 C 55 171 64 160 73 148 C 84 133 82 128 66 135 C 54 137 45 128 34 122 C 22 114 15 103 5 92 C 0 79 23 73 27 86 C 38 94 50 103 64 104 C 74 97 80 86 85 76 C 88 66 63 66 70 49 C 73 42 58 38 71 34 C 81 28 79 17 68 15 C 64 14 59 5 76 9 C 88 12 95 2 103 6 C 114 12 126 16 136 22 C 141 29 133 33 149 42 C 157 46 164 55 152 51 C 140 47 128 54 124 66 C 129 120 210 187 192 203 C 188 208 167 235 159 235 L 158 234 Z;
M 151 231 C 141 235 113 241 126 228 C 154 213 129 198 111 157 C 85 182 73 210 64 232 C 37 219 28 212 39 209 C 59 211 48 218 69 170 C 102 110 91 117 88 90 C 88 86 85 97 75 102 C 64 105 56 107 47 111 C 43 112 37 114 35 112 C 32 108 35 105 37 103 C 40 101 42 99 46 97 C 51 94 58 92 64 89 C 70 85 71 85 74 71 C 76 61 76 59 86 54 C 95 48 107 42 101 38 C 90 32 91 22 93 17 C 93 14 103 1 113 6 C 117 8 120 10 122 14 C 125 19 123 29 120 33 C 118 37 120 43 132 47 C 180 76 162 156 153 127 C 130 34 119 93 147 171 C 150 181 161 226 157 229 L 151 231 Z;
M 151 231 C 141 235 113 241 126 228 C 154 213 129 198 111 157 C 85 182 73 210 64 232 C 37 219 28 212 39 209 C 59 211 48 218 69 170 C 102 110 91 117 88 90 C 88 86 85 97 75 102 C 64 105 56 107 47 111 C 43 112 37 114 35 112 C 32 108 35 105 37 103 C 40 101 42 99 46 97 C 51 94 58 92 64 89 C 70 85 71 85 74 71 C 76 61 76 59 86 54 C 95 48 107 42 101 38 C 90 32 91 22 93 17 C 93 14 103 1 113 6 C 117 8 120 10 122 14 C 125 19 123 29 120 33 C 118 37 120 43 132 47 C 180 76 162 156 153 127 C 130 34 119 93 147 171 C 150 181 161 226 157 229 L 151 231 Z;
M 158 234 C 154 221 174 206 158 197 C 144 186 130 173 116 161 C 93 180 75 206 55 226 C 42 214 28 202 18 188 C 22 176 40 197 46 183 C 55 171 64 160 73 148 C 84 133 82 128 66 135 C 54 137 45 128 34 122 C 22 114 15 103 5 92 C 0 79 23 73 27 86 C 38 94 50 103 64 104 C 74 97 80 86 85 76 C 88 66 63 66 70 49 C 73 42 58 38 71 34 C 81 28 79 17 68 15 C 64 14 59 5 76 9 C 88 12 95 2 103 6 C 114 12 126 16 136 22 C 141 29 133 33 149 42 C 157 46 164 55 152 51 C 140 47 128 54 124 66 C 129 120 210 187 192 203 C 188 208 167 235 159 235 L 158 234 Z;" dur="5s" repeatCount="indefinite" /> </path>
<path id="rot-ost" fill="url(#verlaufRot)" d="M 272 223 C 272 116 274 99 203 102 C 190 103 186 82 203 80 C 222 78 255 73 269 65 C 278 55 266 53 258 39 C 255 29 237 25 252 23 C 264 22 266 3 287 3 C 308 3 311 18 324 22 C 337 26 321 26 316 40 C 308 53 298 54 307 64 C 321 75 353 83 373 82 C 387 82 386 103 370 102 C 296 100 302 115 309 227 C 323 236 302 237 291 236 C 274 238 257 233 272 224 L 272 223 Z">
<animate attributeName="d" values="M 272 223 C 272 116 274 99 203 102 C 190 103 186 82 203 80 C 222 78 255 73 269 65 C 278 55 266 53 258 39 C 255 29 237 25 252 23 C 264 22 266 3 287 3 C 308 3 311 18 324 22 C 337 26 321 26 316 40 C 308 53 298 54 307 64 C 321 75 353 83 373 82 C 387 82 386 103 370 102 C 296 100 302 115 309 227 C 323 236 302 237 291 236 C 274 238 257 233 272 224 L 272 223 Z;
M 272 223 C 272 116 274 99 203 102 C 190 103 186 82 203 80 C 222 78 255 73 269 65 C 278 55 266 53 258 39 C 255 29 237 25 252 23 C 264 22 266 3 287 3 C 308 3 311 18 324 22 C 337 26 321 26 316 40 C 308 53 298 54 307 64 C 321 75 353 83 373 82 C 387 82 386 103 370 102 C 296 100 302 115 309 227 C 323 236 302 237 291 236 C 274 238 257 233 272 224 L 272 223 Z;
M 249 233 C 269 219 273 -19 256 135 C 244 135 241 115 242 86 C 244 72 245 44 260 41 C 268 38 283 44 275 28 C 273 24 271 18 273 11 C 276 5 277 4 286 3 C 305 3 301 23 298 28 C 290 50 318 32 326 50 C 330 61 330 61 332 75 C 333 87 334 92 333 112 C 332 120 329 134 321 131 C 301 -17 318 214 328 232 C 289 244 302 219 289 145 C 273 220 291 242 248 233 L 249 233 Z;
M 249 233 C 269 219 273 -19 256 135 C 244 135 241 115 242 86 C 244 72 245 44 260 41 C 268 38 283 44 275 28 C 273 24 271 18 273 11 C 276 5 277 4 286 3 C 305 3 301 23 298 28 C 290 50 318 32 326 50 C 330 61 330 61 332 75 C 333 87 334 92 333 112 C 332 120 329 134 321 131 C 301 -17 318 214 328 232 C 289 244 302 219 289 145 C 273 220 291 242 248 233 L 249 233 Z;
M 272 223 C 272 116 274 99 203 102 C 190 103 186 82 203 80 C 222 78 255 73 269 65 C 278 55 266 53 258 39 C 255 29 237 25 252 23 C 264 22 266 3 287 3 C 308 3 311 18 324 22 C 337 26 321 26 316 40 C 308 53 298 54 307 64 C 321 75 353 83 373 82 C 387 82 386 103 370 102 C 296 100 302 115 309 227 C 323 236 302 237 291 236 C 274 238 257 233 272 224 L 272 223 Z;" dur="5s" repeatCount="indefinite" /> </path> </svg>
</body> </html>
