Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg class="sun" width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle class="sun-layer-1" cx="400" cy="400" r="400" transform="rotate(8.51377 400 400)" fill="url(#sun-layer-1)" />
  <circle class="sun-layer-2" cx="400" cy="400" r="400" transform="rotate(8.51377 400 400)" fill="url(#sun-layer-2)" />
  <circle class="sun-layer-3" cx="400" cy="400" r="400" transform="rotate(8.51377 400 400)" fill="url(#sun-layer-3)" />

  <path class="sun-flare sun-flare--1a" d="M628.268 445.294C682.133 497.481 651.583 546.456 642.739 589.008C632.288 607.206 535.655 711.687 621.837 640.392C668.609 601.7 714.684 504.86 686.152 426.026C656.327 369.872 649.398 319.809 609.367 326.624C538.62 338.667 574.404 393.108 628.268 445.294Z" fill="url(#sun-flare--1a)" />
  <path class="sun-flare sun-flare--2a" d="M392.266 329.963C294.346 155.496 287.925 308.255 238.965 344.435C203.65 411.97 224.518 518.901 264.649 640.304C304.78 761.707 371.397 681.308 489.383 571.161C607.368 461.014 490.185 504.43 392.266 329.963Z" fill="url(#sun-flare--2a)" />
  <path class="sun-flare sun-flare--3a" d="M519.594 258.17C525.228 214.458 461.6 185.205 420.184 160.641C378.767 136.077 292.558 134.39 243.5 150.535C194.441 166.68 196.813 173.026 146.102 220.418C95.3907 267.809 161.396 414 161.396 414C161.396 303.955 206.032 154.215 307.09 192.304C408.148 230.393 382.678 250.268 440.269 305.225C497.86 360.183 513.959 301.882 519.594 258.17Z" fill="url(#sun-flare--3a)" />
  <path class="sun-flare sun-flare--1b" d="M465 213.027C539.592 205.227 656.049 298.904 683 333C690.245 352.695 714.27 511.798 714.927 399.95C715.284 339.249 670.608 241.757 591.846 213.027C529.643 199.849 222.472 74.931 202 110C165.819 171.976 390.408 220.828 465 213.027Z" fill="url(#sun-flare--1b)" />
  <path class="sun-flare sun-flare--2b" d="M306 259C166.519 402.429 309.688 482.234 306 543C335.114 613.431 366.722 626.611 485.571 673.772C604.419 720.934 474.718 523.173 466 362C457.282 200.827 412 150 306 259Z" fill="url(#sun-flare--2b)" />
  <path class="sun-flare sun-flare--3b" d="M356.221 232.987C326.321 200.607 263.046 230.616 217.625 246.604C172.204 262.592 115.57 327.611 96.4572 375.591C77.3445 423.572 83.733 425.827 87.5181 495.132C91.3031 564.438 245.767 607.672 245.767 607.672C456 575 344 579 318 477C292 375 196.891 287.88 276 279C355.109 270.12 386.121 265.367 356.221 232.987Z" fill="url(#sun-flare--3b)" />

  <defs>
    <linearGradient id="sun-layer-1" x1="400" y1="-0.189056" x2="400" y2="800" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FE7A41" />
      <stop offset="1" stop-color="#FF7A41" />
    </linearGradient>
    <radialGradient id="sun-layer-2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(142.053 575.092) rotate(-32.3788) scale(835.428 476.768)">
      <stop stop-color="#F6F7BD" stop-opacity="0" />
      <stop offset="0.707182" stop-color="#FF7A41" stop-opacity="0.41" />
      <stop offset="1" stop-color="#F6F7BD" />
    </radialGradient>
    <radialGradient id="sun-layer-3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(125.565 816.19) rotate(-25.9961) scale(266.301)">
      <stop stop-color="#F6F7BD" />
      <stop offset="1" stop-color="#FF7A41" stop-opacity="0.29" />
    </radialGradient>
    <linearGradient id="sun-flare--1a" x1="741.183" y1="654.373" x2="534.99" y2="286.424" gradientUnits="userSpaceOnUse">
      <stop offset="0.364236" stop-color="#FF7A41" stop-opacity="0.29" />
      <stop offset="0.59116" stop-color="#FBB178" stop-opacity="0.34" />
      <stop offset="1" stop-color="#F6F7BD" stop-opacity="0" />
    </linearGradient>
    <radialGradient id="sun-flare--2a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379.944 397.865) rotate(90) scale(303.135 159)">
      <stop stop-color="#FBB178" />
      <stop offset="1" stop-color="#FBB178" stop-opacity="0.34" />
    </radialGradient>
    <radialGradient id="sun-flare--3a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(253.964 333.675) rotate(78.699) scale(439.932 231.597)">
      <stop stop-color="#FBB178" />
      <stop offset="1" stop-color="#FFEA7C" stop-opacity="0" />
    </radialGradient>
    <linearGradient id="sun-flare--1b" x1="802.26" y1="317.415" x2="387.769" y2="239.319" gradientUnits="userSpaceOnUse">
      <stop offset="0.364236" stop-color="#FF7A41" stop-opacity="0.29" />
      <stop offset="0.59116" stop-color="#FBB178" stop-opacity="0.34" />
      <stop offset="1" stop-color="#F6F7BD" stop-opacity="0" />
    </linearGradient>
    <radialGradient id="sun-flare--2b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(373.688 429.74) rotate(39.9359) scale(303.135 159)">
      <stop stop-color="#FBB178" />
      <stop offset="1" stop-color="#FBB178" stop-opacity="0.34" />
    </radialGradient>
    <radialGradient id="sun-flare--3b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(243.6 485.131) rotate(28.6349) scale(439.932 231.597)">
      <stop stop-color="#FBB178" />
      <stop offset="1" stop-color="#FFEA7C" stop-opacity="0" />
    </radialGradient>
  </defs>
</svg>
              
            
!

CSS

              
                .sun  {
}

.sun-flare--1b,
.sun-flare--2b,
.sun-flare--3b {
  display: none;
}

              
            
!

JS

              
                console.clear()

const sun = document.querySelector('.sun')
tl = new TimelineMax({ paused: true })

tl.to('.sun-flare--1a', 2.5, { morphSVG:'.sun-flare--1b' }, 0)
             .to('.sun-flare--2a', 5.5, { morphSVG:'.sun-flare--2b' }, 0)
             .to('.sun-flare--3a', 3.5, { morphSVG:'.sun-flare--3b' })
             .play().yoyo(true).repeat(-1)

sun.addEventListener('click', () => tl.paused( !tl.paused() ))
              
            
!
999px

Console