#  No webdyne tags here, just demonstrating SVG tags works as expected
#
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SVG Capabilities Demo</title>
  <style>
    body {
      background: #111;
      color: #fff;
      font-family: "Segoe UI", sans-serif;
      text-align: center;
      margin: 0;
      overflow: hidden;
    }
    svg {
      width: 100vw;
      height: 100vh;
    }
    text {
      font-size: 36px;
      fill: url(#textGradient);
      font-weight: bold;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 800 600">
    <!-- Gradient Definitions -->
    <defs>
      <linearGradient id="bgGradient" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#007cf0" />
        <stop offset="100%" stop-color="#00dfd8" />
      </linearGradient>

      <radialGradient id="ballGradient" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="white" stop-opacity="1" />
        <stop offset="100%" stop-color="#ff00c8" stop-opacity="0.3" />
      </radialGradient>

      <linearGradient id="textGradient" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#ff007f" />
        <stop offset="100%" stop-color="#00e0ff" />
      </linearGradient>

      <!-- Shadow Filter -->
      <filter id="shadow">
        <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#00e0ff"/>
      </filter>
    </defs>

    <!-- Background -->
    <rect width="800" height="600" fill="url(#bgGradient)" />

    <!-- Moving Circle -->
    <circle cx="100" cy="300" r="50" fill="url(#ballGradient)" filter="url(#shadow)">
      <animate attributeName="cx" values="100;700;100" dur="6s" repeatCount="indefinite" />
    </circle>

    <!-- Rotating Polygon -->
    <polygon points="400,150 450,250 400,350 350,250" fill="#fff" opacity="0.3">
      <animateTransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        from="0 400 250"
                        to="360 400 250"
                        dur="10s"
                        repeatCount="indefinite"/>
    </polygon>

    <!-- Interactive Rectangle -->
    <rect x="300" y="400" width="200" height="100" rx="15" ry="15" fill="#ff007f" cursor="pointer">
      <animate attributeName="fill" values="#ff007f;#00e0ff;#ff007f" dur="4s" repeatCount="indefinite"/>
      <title>Hover or click me!</title>
    </rect>

    <!-- SVG Text -->
    <text x="400" y="560" text-anchor="middle" filter="url(#shadow)">SVG Power Demo</text>
  </svg>
</body>
</html>
