<!--



Generated by DrawGPT.

Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.

https://drawgpt.ai



Created: 2025-05-16T23:20:53+00:00

-->

<svg id="svg-root-001" class="svg-canvas" viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">

  <title>PBS Logo Fun Animation</title>

  <desc>This PBS logo twists and bounces – a boomerang of broadcasting brilliance!</desc>

  <defs id="defs-001" class="defs">

    <radialGradient id="grad1-001" class="gradient" cx="50%" cy="50%" r="50%">

      <stop id="stop1-001" class="gradient-stop" offset="0%" stop-color="#FFD700">

        <animate attributeName="stop-color" values="#FFD700;#FF8C00;#FFD700" dur="5s" repeatCount="indefinite" />

      </stop>

      <stop id="stop2-001" class="gradient-stop" offset="100%" stop-color="#FF4500">

        <animate attributeName="stop-color" values="#FF4500;#DC143C;#FF4500" dur="5s" repeatCount="indefinite" />

      </stop>

    </radialGradient>

  </defs>

  <!-- Background -->

  <rect id="bg1-001" class="background" x="0" y="0" width="512" height="512" fill="url(#grad1-001)">

    <animate attributeName="opacity" from="0.9" to="1" dur="5s" begin="0s" repeatCount="indefinite" />

  </rect>

  <!-- Letter P -->

  <g id="groupP-001" class="letter-P" transform="translate(0,0)">

    <path id="pathP-001" class="shape-P" d="M50,100 L90,100 Q130,100 130,140 L130,240 Q130,280 90,280 L50,280 Z" fill="#C62828">

      <animate attributeName="fill" values="#C62828;#EF5350;#C62828" dur="5s" repeatCount="indefinite" />

    </path>

    <animateTransform id="animP-001" class="anim-P" attributeName="transform" type="translate" values="0,0;0,5;0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />

  </g>

  <!-- Letter B -->

  <g id="groupB-001" class="letter-B" transform="translate(0,0)">

    <!-- Upper Loop -->

    <path id="pathB1-001" class="shape-B-upper" d="M180,100 L220,100 Q260,100 260,140 L260,190 Q260,230 220,230 L180,230 Z" fill="#1565C0">

      <animate attributeName="fill" values="#1565C0;#42A5F5;#1565C0" dur="5s" repeatCount="indefinite" />

    </path>

    <!-- Lower Loop -->

    <path id="pathB2-001" class="shape-B-lower" d="M180,230 L220,230 Q260,230 260,270 L260,320 Q260,360 220,360 L180,360 Z" fill="#1565C0">

      <animate attributeName="fill" values="#1565C0;#42A5F5;#1565C0" dur="5s" repeatCount="indefinite" />

    </path>

    <animateTransform id="animB-001" class="anim-B" attributeName="transform" type="translate" values="0,0;0,-5;0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />

  </g>

  <!-- Letter S -->

  <g id="groupS-001" class="letter-S" transform="translate(0,0)">

    <path id="pathS-001" class="shape-S" d="M350,110 

      C300,110 300,200 350,200 

      C400,200 400,270 350,270 

      C300,270 300,360 350,360 

      C400,360 400,450 350,450 

      L320,450 

      C370,450 370,360 320,360 

      C270,360 270,270 320,270 

      C370,270 370,200 320,200 

      C270,200 270,110 320,110 Z" fill="#2E7D32">

      <animate attributeName="fill" values="#2E7D32;#66BB6A;#2E7D32" dur="5s" repeatCount="indefinite" />

    </path>

    <animateTransform id="animS-001" class="anim-S" attributeName="transform" type="translate" values="0,0;0,3;0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />

  </g>

  <!-- Decorative Static Elements -->

  <circle id="circle1-001" class="decorative-circle" cx="400" cy="80" r="10" fill="#8E24AA">

    <animate attributeName="r" values="10;14;10" dur="5s" repeatCount="indefinite" />

  </circle>

  <rect id="rect1-001" class="decorative-rect" x="60" y="400" width="30" height="30" fill="#00897B">

    <animateTransform attributeName="transform" type="rotate" from="0 75 415" to="360 75 415" dur="5s" repeatCount="indefinite" />

  </rect>

  <polygon id="poly1-001" class="decorative-poly" points="450,300 470,320 430,320" fill="#FBC02D">

    <animateTransform attributeName="transform" type="translate" values="0,0;5,5;0,0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />

  </polygon>

</svg>