SVG Drawing Match #634

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background with radial gradient for a dynamic sky -->
  <defs>
    <radialGradient id="skyGradient" gradientUnits="userSpaceOnUse" cx="150" cy="150" r="150" fx="150" fy="150">
      <stop offset="0" stop-color="#1a4377" stop-opacity="1"/>
      <stop offset="1" stop-color="#0b2b4e" stop-opacity="1"/>
    </radialGradient>
    
    <linearGradient id="rainbowGradient" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ff0000"/>
      <stop offset="0.2" stop-color="#ff9900"/>
      <stop offset="0.4" stop-color="#ffff00"/>
      <stop offset="0.6" stop-color="#33ff00"/>
      <stop offset="0.8" stop-color="#0099ff"/>
      <stop offset="1" stop-color="#4b0082"/>
    </linearGradient>

    <!-- Custom metallic gradient for the unicycle wheel -->
    <linearGradient id="metalGradient" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f3f3f3"/>
      <stop offset="1" stop-color="#888"/>
    </linearGradient>
  </defs>

  <!-- Sky background -->
  <rect width="300" height="300" fill="url(#skyGradient)"/>

  <!-- Rainbow path -->
  <path d="M0,200 Q150,300 300,200 L300,220 L0,220 Z" fill="url(#rainbowGradient)"/>

  <!-- Unicycle wheel -->
  <g transform="translate(150,220)">
    <circle r="20" fill="url(#metalGradient)"/>
    <circle r="15" fill="#666"/>
  </g>

  <!-- Octopus body -->
  <g transform="translate(150,210)">
    <!-- Octopus main body -->
    <path d="M-40,-40 C-10,-20 0,0 40,0 60,-20 40,-40 0,-60 -40,-40z" 
          fill="#ff9999" stroke="#ff6666" stroke-width="2"/>
    
    <!-- Tentacles -->
    <path d="M0,0 Q-20,-20 -40,-30" stroke="#ff9999" stroke-width="4" fill="none"/>
    <path d="M0,0 Q20,-20 40,-30" stroke="#ff9999" stroke-width="4" fill="none"/>
    
    <!-- Eyes and mouth -->
    <circle cx="-15" cy="-25" r="5" fill="#fff"/>
    <circle cx="15" cy="-25" r="5" fill="#fff"/>
    <path d="M-20,-30 Q0,-40 20,-30" stroke="#ff6666" stroke-width="2" fill="none"/>
  </g>

  <!-- Planets being juggled -->
  <g transform="translate(150,150)">
    <!-- Planet 1 (Earth-like) -->
    <g transform="translate(-100,0)">
      <circle r="25" fill="#3498db">
        <animate attributeName="r" from="25" to="30" dur="2s" repeatCount="indefinite" />
      </circle>
      <circle r="20" fill="#2ecc71">
        <animate attributeName="r" from="20" to="25" dur="2s" repeatCount="indefinite" />
      </circle>
    </g>

    <!-- Planet 2 (Gas giant-like) -->
    <g transform="translate(0,100)">
      <circle r="35" fill="#e74c3c">
        <animate attributeName="r" from="35" to="40" dur="2s" repeatCount="indefinite" />
      </circle>
      <circle r="25" fill="#e67e22">
        <animate attributeName="r" from="25" to="30" dur="2s" repeatCount="indefinite" />
      </circle>
    </g>

    <!-- Planet 3 (Ring-like) -->
    <g transform="translate(100,0)">
      <circle r="30" fill="#f1c40f"/>
      <path d="M-40,0 Q0,-20 40,0 Q0,20 -40,0" fill="none" stroke="#f1c40f" stroke-width="4"/>
    </g>
  </g>

  <!-- Motion lines showing juggling movement -->
  <path d="M120,150 Q150,130 180,150" stroke="#fff" stroke-width="2" opacity="0.7"/>
  <path d="M180,150 Q210,130 240,150" stroke="#fff" stroke-width="2" opacity="0.7"/>
  <path d="M120,240 Q150,260 180,240" stroke="#fff" stroke-width="2" opacity="0.7"/>
  <path d="M180,240 Q210,260 240,240" stroke="#fff" stroke-width="2" opacity="0.7"/>
</svg>