Beispiel:Shape-Morphing-3.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>Shape-Morphing 3</title>

<style> svg { 

width: 100%;
height: 100vh;
padding: 0;
background: oklch(0.26 0.1 280);

}

circle { 

 fill: LightYellow;
 fill-opacity: 0.02;

}

  1. moon {
 fill: yellow;
 stroke: #333;
 stroke-width: 0;

}

html, body{ 

 margin: 0;
 padding: 0;

}

</style> </head>

<body> <svg viewBox="0 0 600 460">

<circle r="100" cx="200" cy="199" />

<g transform="rotate(-25 200 199)"> 

 <path id="moon" d="M200,99 C255,99 300,144 300,199 C300,254 255,299 200,299 C255,299 300,254 300,199 C300,144 255,99 200,99">
   <animate attributeName="d" values="
   M200,99 C255,99 300,144 300,199 C300,254 255,299 200,299 C255,299 300,254 300,199 C300,144 255,99 200,99;
   M200,99 C145,99 100,144 100,199 C100,254 145,299 200,299 C255,299 300,254 300,199 C300,144 255,99 200,99;
   M200,99 C145,99 100,144 100,199 C100,254 145,299 200,299 C145,299 100,254 100,199 C100,144 145,99 200,99"
   dur="6s"
   repeatCount="indefinite"/>
 </path>

</g>

<path d="m60,70 l15-45 l15,45 l-38-28 h47" id="star" fill="yellow" /> <use href="#star" x="350" y="100" /> <use href="#star" transform="translate(20,100) scale(0.5,0.5)" /> <use href="#star" transform="translate(250,10) scale(0.5,0.5)" /> <use href="#star" transform="translate(0,150) scale(0.2,0.2)" /> <use href="#star" transform="translate(200,60) scale(0.2,0.2)" /> <use href="#star" transform="translate(250,50) scale(0.2,0.2)" /> <use href="#star" transform="translate(350,210) scale(0.2,0.2)" />

<path id="cloud" transform="translate(0,250) scale(5,5)" d="m25.747 12.919c-1.217-.002-2.234.233-3.213.744-.907.474-2.02 1.405-2.564 2.153-.927 1.265-.878 1.224-1.317 1.042-1.382-.575-2.981-.676-4.251-.267-2.353.756-4.04 3.112-4.138 5.784-.018.43-.066.843-.111.92-.045.073-.333.204-.638.284-1.446.379-2.598 1.343-3.199 2.678-.285.634-.317.84-.317 2.116 0 1.341.021 1.452.379 2.21.632 1.337 1.979 2.508 3.25 2.822.46.113 3.788.148 3.892.041.042-.043-.028-.287-.157-.546-.337-.688-.581-1.892-.581-2.873-.0001-2.698 1.56-4.806 4.235-5.719.864-.295 1.066-.424 1.066-.684 0-.367.638-1.841 1.139-2.632.702-1.11 1.631-1.963 2.788-2.557 2.895-1.485 6.302-1.014 8.389 1.158l.741.768.811-.219c.446-.12.957-.223 1.136-.227.408-.006.425-.311.078-1.391-1.084-3.38-4.02-5.595-7.418-5.603zm-.236 6.082c-1.442-.006-2.045.131-3.237.752-1.139.594-2.207 2.046-2.783 3.788-.127.383-.23.815-.23.96 0 .463-.267.663-1.139.849-1.751.374-3.083 1.391-3.586 2.738-.205.55-.264.96-.263 1.815.003 2.674 1.218 4.477 3.397 5.04.453.117 3.074.147 11.317.13l10.728-.02.481-.271c1.027-.572 1.675-1.723 1.782-3.165.163-2.206-.736-3.706-2.653-4.421l-.673-.251-.071-.955c-.274-3.492-3.672-5.581-7.08-4.353l-.706.254-.784-.86c-1.429-1.562-2.452-2.023-4.5-2.035" fill="#dfebfa"/> <use href="#cloud" transform="translate(350,20)" /> </svg>

</body> </html>

Abgerufen am 10.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Shape-Morphing-3.html"