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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.sunny-moony(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 140.22917 47.625001')
  g(transform='translate(30.4270831 -253.30314617)')
    path.cloud.cloud--static(d='M28.400015 276.59647a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z')
    path.cloud.cloud--static(d='M39.715405 276.66449a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z')
    path.cloud.cloud--static(d='M51.030797 276.66449a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z')
    g.sunny-moony__sun(transform='translate(-15.33403 12.199538)')
      g.sun__ray-wrap
        rect.sun__ray(ry='.85020351' y='266.68771' x='76.802017' height='6.7336116' width='1.700407')
      g.sun__ray-wrap
        rect.sun__ray(width='1.700407' height='6.7336116' x='76.802017' y='266.68771' ry='.85020351')
      g.sun__ray-wrap
        rect.sun__ray(ry='.85020351' y='266.68771' x='76.802017' height='6.7336116' width='1.700407')
      g.sun__ray-wrap
        rect.sun__ray(width='1.700407' height='6.7336116' x='76.802017' y='266.68771' ry='.85020351')
      g.sun__ray-wrap
        rect.sun__ray(ry='.85020351' y='266.68771' x='76.802017' height='6.7336116' width='1.700407')
      g.sun__ray-wrap
        rect.sun__ray(width='1.700407' height='6.7336116' x='76.802017' y='266.68771' ry='.85020351')
      g.sun__ray-wrap
        rect.sun__ray(ry='.85020351' y='266.68771' x='76.802017' height='6.7336116' width='1.700407')
      g.sun__ray-wrap
        rect.sun__ray(width='1.700407' height='6.7336116' x='76.802017' y='266.68771' ry='.85020351')
      path.sun(d='M81.652814 274.05511c-2.209469 2.20946-5.791721 2.20946-8.001189-.00001-2.209462-2.20946-2.209462-5.79172 0-8.00118 2.209468-2.20947 5.79172-2.20948 8.001189-.00001 2.209468 2.20947 2.209468 5.79173 0 8.0012z')
      path.sun__cloud(d='M77.680127 264.39695a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z' fill='#4d4d4d')
    g.cloud-and-stars
      g.clouds-dud(style='opacity: 0;')
        path.cloud-path(d='M12.976038 277.820928a5.7937272 5.7937272 0 00-5.7763908 5.44153 3.4811737 3.4811737 0 00-.8211396-.10232 3.4811737 3.4811737 0 00-3.4814406 3.48092 3.4811737 3.4811737 0 003.4814406 3.48145H23.212106a3.1751005 3.1751005 0 003.175516-3.17552 3.1751005 3.1751005 0 00-3.133659-3.17293 3.9572877 3.9572877 0 00.0047-.0915 3.9572877 3.9572877 0 00-3.957381-3.95738 3.9572877 3.9572877 0 00-1.711523.39326 5.7937272 5.7937272 0 00-4.613672-2.29754z')
      g.stars
        path.stars-path(d='M5.9614505 278.866758l-.4571285.0119-.2493413.38332-.1525884-.43107-.4416133-.11869.3628235-.27833-.023591-.45667.3768259.25906.4270335-.16356-.1299326.43844zM3.941467 292.910448l-.241402-.27263-.361445.0443.184695-.31384-.153824-.33006.35555.0787.266377-.24829.03505.36246.318454.17661-.333889.14534zM20.1013131 294.160918l-.3719498.11234-.118324.37009-.221777-.31904-.3885392.002.234884-.3095-.1218064-.36896.3669433.12774.3132587-.22986-.0081.38846zM24.4298455 278.866778l-.2265258-.38682-.4470788-.0327.2978928-.33497-.1070641-.4353.4106337.1798.3809095-.23634-.044107.4461.3424792.28923-.4378936.0959zM27.903033 290.016758l-.395679-.64058-.752015-.0372.486962-.57426-.197-.72671.696638.28567.630263-.41192-.05642.75082.586523.47212-.731504.17836zM11.973298 294.066288l-.6300807.31096-.1010381.69534-.4904493-.50315-.6925256.11877.3269662-.62192-.3269662-.62193.6925256.11878.4904493-.50315.1010381.69533zM1.35803807 284.52489138l-.59904028-.4703737-.72707759.22685189.26220194-.71508846-.44042579-.62139275.76111464.0283961.45488053-.61088902.20819347.73263644.7215586.24383731-.63244349.42439945zM13.82230515 274.97269136l-.59904027-.47037371-.7270776.2268519.26220195-.71508846-.44042579-.62139276.76111464.0283961.45488052-.61088902.20819347.73263645.7215586.2438373-.63244348.42439945z')
    g.sunny-moony__moon
      path.moon(d='M22.714506 282.254048a5.6576948 5.6576948 0 01-5.657695 5.6577 5.6576948 5.6576948 0 01-5.657695-5.6577 5.6576948 5.6576948 0 015.657695-5.65769 5.6576948 5.6576948 0 015.657695 5.65769z')
      path.moon__cloud(d='M17.084716 276.596488a1.904456 1.904456 0 00-1.374592.55759 1.904456 1.904456 0 00-.458886.74363 1.904456 1.904456 0 00-2.1947.35605 1.904456 1.904456 0 00-.35605 2.19624 1.904456 1.904456 0 00-.743624.45734 1.904456 1.904456 0 000 2.69338 1.904456 1.904456 0 00.743624.4594 1.904456 1.904456 0 00.35605 2.1947 1.904456 1.904456 0 002.196251.35605 1.904456 1.904456 0 00.457335.74311 1.904456 1.904456 0 002.693376 0 1.904456 1.904456 0 00.459404-.74363 1.904456 1.904456 0 002.194698-.35553 1.904456 1.904456 0 00.356049-2.19677 1.904456 1.904456 0 00.743107-.45733 1.904456 1.904456 0 000-2.69338 1.904456 1.904456 0 00-.743622-.45889 1.904456 1.904456 0 00-.355534-2.19469 1.904456 1.904456 0 00-2.196767-.35605 1.904456 1.904456 0 00-.457335-.74363 1.904456 1.904456 0 00-1.318784-.55759z')
    g.cloud-and-stars
      g.clouds
        path.cloud-path(d='M12.976038 277.820928a5.7937272 5.7937272 0 00-5.7763908 5.44153 3.4811737 3.4811737 0 00-.8211396-.10232 3.4811737 3.4811737 0 00-3.4814406 3.48092 3.4811737 3.4811737 0 003.4814406 3.48145H23.212106a3.1751005 3.1751005 0 003.175516-3.17552 3.1751005 3.1751005 0 00-3.133659-3.17293 3.9572877 3.9572877 0 00.0047-.0915 3.9572877 3.9572877 0 00-3.957381-3.95738 3.9572877 3.9572877 0 00-1.711523.39326 5.7937272 5.7937272 0 00-4.613672-2.29754z')
      g.stars-dud(style='opacity: 0;')
        path.stars-path(d='M5.9614505 278.866758l-.4571285.0119-.2493413.38332-.1525884-.43107-.4416133-.11869.3628235-.27833-.023591-.45667.3768259.25906.4270335-.16356-.1299326.43844zM3.941467 292.910448l-.241402-.27263-.361445.0443.184695-.31384-.153824-.33006.35555.0787.266377-.24829.03505.36246.318454.17661-.333889.14534zM20.1013131 294.160918l-.3719498.11234-.118324.37009-.221777-.31904-.3885392.002.234884-.3095-.1218064-.36896.3669433.12774.3132587-.22986-.0081.38846zM24.4298455 278.866778l-.2265258-.38682-.4470788-.0327.2978928-.33497-.1070641-.4353.4106337.1798.3809095-.23634-.044107.4461.3424792.28923-.4378936.0959zM27.903033 290.016758l-.395679-.64058-.752015-.0372.486962-.57426-.197-.72671.696638.28567.630263-.41192-.05642.75082.586523.47212-.731504.17836zM11.973298 294.066288l-.6300807.31096-.1010381.69534-.4904493-.50315-.6925256.11877.3269662-.62192-.3269662-.62193.6925256.11878.4904493-.50315.1010381.69533zM1.35803807 284.52489138l-.59904028-.4703737-.72707759.22685189.26220194-.71508846-.44042579-.62139275.76111464.0283961.45488053-.61088902.20819347.73263644.7215586.24383731-.63244349.42439945zM13.82230515 274.97269136l-.59904027-.47037371-.7270776.2268519.26220195-.71508846-.44042579-.62139276.76111464.0283961.45488052-.61088902.20819347.73263645.7215586.2438373-.63244348.42439945z')

              
            
!

CSS

              
                *
  box-sizing border-box
  animation  fadeIn .5s

body
  min-height 100vh
  margin 0
  display flex
  align-items center
  justify-content center
  background 'hsl(200, %s, %s)' % (calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))

svg
  display none
  width 95vmin

.moon__cloud
.sun__cloud
  fill blue
  display none

.cloud--static
  fill 'hsl(0, 0%, %s)' % calc(var(--lightness) * 1%)

.cloud-path
  fill hsl(0, 0%, 75%)

.moon
  fill 'hsl(0, 0%, %s)' % calc(var(--lightness) * 1%)

.stars-path
  fill hsl(50, 30%, 75%)

.sun
.sun__ray
  fill 'hsl(50, %s, %s)' % (calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
              
            
!

JS

              
                const {
  gsap: { set, to, timeline },
} = window

gsap.registerPlugin(MorphSVGPlugin)

const MOON_GROUP = document.querySelector('.sunny-moony__moon')
const MOON = document.querySelector('.moon')
const SUN_GROUP = document.querySelector('.sunny-moony__sun')
const SUN_RAY_WRAPS = document.querySelectorAll('.sun__ray-wrap')
const SUN_RAYS = document.querySelectorAll('.sun__ray')
const SUN = document.querySelector('.sun')
const CLOUDS = document.querySelectorAll('.clouds')
const STARS = document.querySelectorAll('.stars')
const CLOUD_AND_STARS = document.querySelectorAll('.cloud-and-stars')

const ANGLE = 70
const SWING_SPEED = 0.45
const TRANSFORM_ORIGIN = '50% -150%'
const CENTERED = '50% 50%'

set('svg', { display: 'block' })
set(document.body, { '--saturation': 80, '--lightness': 60 })
set('.cloud--static', { '--lightness': 100 })
set([SUN, SUN_RAYS], { '--lightness': 50, '--saturation': 85 })
set(SUN_GROUP, { transformOrigin: TRANSFORM_ORIGIN })
set(MOON_GROUP, { transformOrigin: '50% -150%' })
set(MOON, { morphSVG: '.moon__cloud', '--lightness': 100 })
set(SUN_RAY_WRAPS, {
  transformOrigin: CENTERED,
  rotate: index => (360 / 8) * index + 5,
})

set(CLOUD_AND_STARS, { rotate: 0, transformOrigin: '50% -50%' })
set([CLOUDS, STARS], { transformOrigin: '50% 50%', rotate: 0 })
set(CLOUDS, { scale: 0 })
set(STARS, { opacity: 0, scale: 0 })

set(SUN_GROUP, { rotate: -ANGLE })
set(SUN, { morphSVG: '.sun' })
set(SUN_RAYS, { y: 10 })

// Create a swinging sun timeline
const getSunSwing = () =>
  new timeline()
    .add(
      to(SUN, {
        morphSVG: '.sun__cloud',
        duration: SWING_SPEED,
        ease: 'Power4.easeIn',
      }),
      0
    )
    .add(
      to(SUN_GROUP, {
        rotate: 0,
        duration: SWING_SPEED,
        ease: 'Power4.easeIn',
      }),
      0
    )
    .add(
      to(SUN_RAYS, { y: 0, duration: SWING_SPEED, ease: 'Power4.easeIn' }),
      0
    )

// Create a swinging moon timeline
const getMoonSwing = () =>
  new timeline()
    .add(
      to(MOON, {
        morphSVG: '.moon',
        duration: SWING_SPEED,
        ease: 'Power4.easeOut',
      }),
      0
    )
    .add(
      to([MOON_GROUP, CLOUD_AND_STARS], {
        rotate: ANGLE,
        duration: SWING_SPEED,
        ease: 'Power4.easeOut',
      }),
      0
    )
    .add(
      to(STARS, {
        rotate: -ANGLE,
        opacity: 1,
        scale: 1,
        duration: SWING_SPEED,
        ease: 'Power4.easeOut',
      }),
      0
    )
    .add(
      to(CLOUDS, {
        rotate: -ANGLE,
        scale: 1,
        duration: SWING_SPEED,
        ease: 'Power4.easeOut',
      }),
      0
    )

const SWINGERS = new timeline().add(getSunSwing()).add(getMoonSwing())

const COLORISER = new timeline()
  .add(
    to(document.body, {
      '--saturation': 25,
      '--lightness': 20,
      duration: SWING_SPEED * 2,
      ease: 'Power4.easeInOut',
    }),
    0
  )
  .add(
    to([SUN_RAYS, SUN], {
      '--lightness': 75,
      '--saturation': 0,
      duration: SWING_SPEED,
      ease: 'Power4.easeIn',
    }),
    0
  )
  .add(
    to('.cloud--static', {
      '--lightness': 75,
      duration: 0,
      delay: SWING_SPEED,
      ease: 'Power4.easeIn',
    }),
    0
  )

// Sun is a different case if we want to on/off the cloud color. We could do a timeline that spans two iterations
// turning the colors on and off correctly. But it kinda looks better without transitions.
// const SUN_COLOR_TL = new timeline()
//   .add(to([SUN_RAYS, SUN], {'--lightness': 75, '--saturation': 0, duration: SWING_SPEED, ease: 'Power4.easeIn'}), 0)

new timeline({ repeatRefresh: true, repeat: -1, yoyo: true })
  .add(SWINGERS)
  .add(COLORISER, 0)

// GSDevTools.create()

              
            
!
999px

Console