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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div class="main">
  <svg class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
        <path d="M42 700A498 498 0 0 1 500 0a500 500 0 0 1 458 700c-35-22-66-54-110-54-67 0-107 75-173 75-68 0-107-75-174-75-68 0-107 75-174 75s-107-75-173-75c-45 0-77 32-112 54z" id="Sky" fill="#2F4FFE" style="transform: translate(67px, 15px);"/>
        <g style="transform: translate(140px, 90px);">
          <circle id="Star" fill="#FDD836" cx="5" cy="497" r="5"/>
          <circle id="Star" fill="#FDD836" cx="33" cy="381" r="5"/>
          <circle id="Star" fill="#FDD836" cx="72" cy="344" r="5"/>
          <circle id="Star" fill="#FDD836" cx="141" cy="170" r="5"/>
          <circle id="Star" fill="#FDD836" cx="238" cy="203" r="5"/>
          <circle id="Star" fill="#FDD836" cx="604" cy="5" r="5"/>
          <circle id="Star" fill="#FDD836" cx="757" cy="240" r="5"/>
          <circle id="Star" fill="#FDD836" cx="830" cy="367" r="5"/>
          <circle id="Star" fill="#FDD836" cx="888" cy="507" r="5"/>
          <circle id="Star" fill="#FDD836" cx="670" cy="451" r="5"/>
          <circle id="Oval-4" fill="#FFF9C4" cx="159" cy="446" r="10"/>
          <circle id="Oval-4" fill="#FFF9C4" cx="28" cy="235" r="10"/>
          <circle id="Oval-4" fill="#FFF9C4" cx="604" cy="203" r="10"/>
          <circle id="Oval-4" fill="#FFF9C4" cx="641" cy="334" r="10"/>
          <circle id="Oval-4" fill="#FFF9C4" cx="815" cy="432" r="10"/>
        </g>
        <path id="Cloud-3" d="M64 164a54 54 0 0 1-64-52c0-30 24-54 53-54a74 74 0 0 1 145 25c6-2 13-4 20-4a43 43 0 1 1-14 85H64z" fill="#2879FF" style="transform: translate(0, 333px)" />
        <path id="Cloud-1" d="M148,117 L38.8402113,117 C36.336021,117.652627 33.7085772,118 31,118 C13.8791728,118 0,104.120827 0,87 C0,69.8791728 13.8791728,56 31,56 C35.8008379,56 40.3467866,57.0913101 44.403306,59.0393901 C44.1371089,56.8969659 44,54.7144947 44,52.5 C44,23.5050506 67.5050506,0 96.5,0 C121.544838,0 142.493713,17.5369048 147.736802,41.0008924 C147.824465,41.0002978 147.912197,41 148,41 C168.98682,41 186,58.0131795 186,79 C186,99.9868205 168.98682,117 148,117 Z" fill="#2879FF" style="transform: translate(0, 149px)"/>
        <path fill="#64DD17" d="M590 81c-39 22-73 60-120 60-68 0-107-75-174-75-68 0-107 75-174 75-48 0-82-38-122-60C70 32 176 0 295 0s225 32 295 81z" style="transform: translate(272px, 595px)"/>
      </svg>
  <svg id="Ray" class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
        <g style="transform: translate(-71px, 25px)">
          <path d="M21,0 C100.333333,7.33333333 276.333333,34.6666667 549,82 L549,166 C298.333333,195.333333 122.333333,213.333333 21,220 C-9,181 -4,43 21,0 Z" fill="#FFF176" fill-opacity="0.55"/>
        </g>
      </svg>
  <svg class="position-absolute svg-container overflow-visible" viewBox="0 0 1135 737" version="1" xmlns="http://www.w3.org/2000/svg">
        <g id="tower" style="transform: translate(474px, 222px)">
          <path d="M178 160L6 241l4-107 164-76 4 102z" fill="#FF7043"/>
          <path d="M1 353l181-84 5 116-187 2 1-34z" fill="#FF7043"/>
          <path fill="#C5CAE9" d="M178 160l4 109L1 353l5-112 172-81zm-4-102L10 134 16 0l155 2 3 56z"/>
        </g>
        <g class="tower-top" style="transform: translate(457px, 185px)">
          <defs>
            <path id="balcony-mask" d="M0 0H220V70H0z"/>
          </defs>
          <mask id="mask-2" fill="#fff">
            <use xlink:href="#balcony-mask"/>
          </mask>
          <use id="Mask" fill="#F4511E" xlink:href="#balcony-mask"/>
          <circle id="ray-shadow-bottom" fill="#FA9950" mask="url(#mask-2)" cx="-57" cy="-4" r="57"/>
        </g>
        <g style="transform: translate(477px, 0)">
          <defs>
            <path d="M0,90 C0,40.2943725 40.2943725,0 90,0 C139.705627,0 180,40.2943725 180,90 L0,90 Z" id="top-mask"/>
          </defs>
          <mask id="top-mask-2" fill="#fff">
            <use xlink:href="#top-mask"/>
          </mask>
          <use id="Combined-Shape" fill="#F4511E" xlink:href="#top-mask"/>
          <path class="tower-top-shadow" id="tower-top-shadow" fill="#E64A19" mask="url(#top-mask-2)" d="M180 0H180V95H360z"/>
          <!-- <path class="tower-top-shadow" id="tower-top-shadow" fill="#E64A19" mask="url(#top-mask-2)" d="M180 0H0V95H180z"/> -->
        </g>
        <rect id="Hat-Base" fill="#F4511E" width="210" height="22" rx="11" style="transform: translate(462px, 90px)"/>
        <path id="Cloud-2" d="M138,109 L36.5775851,109 C34.1620713,109.652119 31.6216617,110 29,110 C12.9837423,110 0,97.0162577 0,81 C0,64.9837423 12.9837423,52 29,52 C33.4103013,52 37.590661,52.9844968 41.3333019,54.745713 C41.1131774,52.861063 41,50.9437485 41,49 C41,21.9380473 62.9380473,0 90,0 C113.280244,0 132.768579,16.2350924 137.760665,38.000937 C157.246789,38.1410659 173,53.9808531 173,73.5 C173,92.9391703 157.375617,108.72907 138,108.996551 L138,109 Z" fill="#438AFF" style="transform: translate(0, 457px)"/>
        <g style="transform: translate(477px, 112px)">
          <defs>
            <path id="ray-source-mask" d="M0 0H180V73H0z"/>
          </defs>
          <mask id="mask-ray-source-2" fill="#fff">
            <use xlink:href="#ray-source-mask"/>
          </mask>
          <use id="Mask" fill="#FFD54F" xlink:href="#ray-source-mask"/>
          <ellipse id="ray-source" fill="#FFF176" mask="url(#mask-ray-source-2)" cx="44" cy="36" rx="63" ry="56"/>
        </g>
      </svg>
</div>
              
            
!

CSS

              
                .main {
  max-width: 700px; 
  margin: 0 auto;
}

.position-absolute {
  position: absolute; }

.overflow-visible {
  overflow: visible !important; }

.svg-container {
  width: 100%;
  max-width: 700px; }

              
            
!

JS

              
                CSSPlugin.defaultTransformPerspective = 500;
TweenMax.defaultTransformPerspective = 500;

const WIDTH = 1135;

const getWidth = el => el.getBoundingClientRect().width;

const cloudSmall = function() {
  const el = document.getElementById('Cloud-1');
  const tweenCloudSmall = TweenMax.to(el, 50, {
    x: WIDTH - getWidth(el),
    ease: Power0.easeNone,
    yoyo: true,
    repeat: -1,
  });
  return tweenCloudSmall;
};

const largeCloud = function() {
  const el = document.getElementById('Cloud-3');
  return TweenMax.to(el, 50, {
    x: WIDTH - getWidth(el),
    ease: Power0.easeNone,
    yoyo: true,
    repeat: -1,
  });
};

const mediumCloud = function() {
  const el = document.getElementById('Cloud-2');
  const tweenMediumCloud = TweenMax.from(el, 60, {
    x: WIDTH - getWidth(el),
    ease: Power0.easeNone,
    yoyo: true,
    repeat: -1,
  });
  return tweenMediumCloud;
};

const rayRotation = function(duration) {
  const transformOriginX = 548 + 180 / 2.0;
  const tweenRayRotation = TweenMax.to('#Ray', duration, {
    transformPerspective: 3000,
    rotationY: '-360',
    repeat: -1,
    ease: Power0.easeNone,
  });
  return tweenRayRotation;
};

const raySource = function(duration) {
  const el = document.getElementById('ray-source');
  const maskEl = document.getElementById('ray-source-mask');
  const radius = el.getAttribute('rx');
  const maskWidth = getWidth(maskEl);
  const start = -radius;
  const end = +radius + maskWidth;
  TweenMax.set('#ray-source', { attr: { cx: end }, visibility: 'visible' });
  const tween = TweenMax.to('#ray-source', duration / 2, {
    attr: { cx: `${start}` },
    ease: Power0.easeNone,
    repeat: -1,
    repeatDelay: duration / 2,
  });
  return tween;
};

const rayShadowBottom = function(duration) {
  const el = document.getElementById('ray-shadow-bottom');
  const maskEl = document.getElementById('balcony-mask');
  const radius = el.getAttribute('r');
  const maskWidth = getWidth(maskEl);
  const start = -radius;
  const end = +radius + maskWidth;
  TweenMax.set(el, { attr: { cx: end }, visibility: 'visible' });
  const tween = TweenMax.to(el, duration / 2, {
    attr: { cx: `${start}` },
    ease: Power0.easeNone,
    repeat: -1,
    repeatDelay: duration / 2,
  });
  return tween;
};

const towerTopShadowBottom = function(duration) {
  const maskEl = document.getElementById('top-mask');
  const maskWidth = getWidth(maskEl);
  const start = maskWidth;
  const end = 0;

  TweenMax.set('#tower-top-shadow', {
    attr: { d: `M${2 * maskWidth} 0H${maskWidth}V95H${2 * maskWidth}z` },
    visibility: 'visible',
  });

  const tween = TweenMax.to('#tower-top-shadow', duration, {
    attr: { d: `M${0} 0H${-maskWidth}V95H${0}z` },
    ease: Power0.easeNone,
    repeat: -1,
  });
  return tween;
};

const rayScene = function() {
  const tl = new TimelineMax();
  const duration = 3;
  tl.add('ray');
  tl.add(towerTopShadowBottom(duration), `ray`);
  tl.add(rayRotation(duration), 'ray');
  tl.add(raySource(duration), `ray+=${duration / 2}`);
  tl.add(rayShadowBottom(duration), `ray+=${duration / 2}`);

  return tl;
};

const master = new TimelineMax();
master.add('start');
master
  .add(cloudSmall(), 'start')
  .add(largeCloud(), 'start-=15')
  .add(mediumCloud(), 'start')
  .add(rayScene(), 'start');

              
            
!
999px

Console