<style>
  css-doodle {
    --rule-stars:( :doodle {
      @grid: 10 x 10 / 100vmax 100vmax;
      grid-gap: 20px;
      z-index: 3;
    }

    @size: 1.6em;
    @size: @r(5px, 30px);
    @shape: hypocycloid 4;
    animation: blink linear @r(5s, 10s) @r(-0.1s, -1s) infinite;
    
    @nth(1) {
      transform: scale(@r(.1, .9));
      @place-cell: 50px 80px;
      background-color: #ffb300;
    }
    
    @nth(2) {
      transform: scale(@r(.2, .6));
      @place-cell: 380px 40px;
      background-color: #ffb300;
    }
    
    @nth(3) {
      transform: scale(@r(.5, .9));
      @place-cell: 400px 50px;
      background-color: #ffb300;
    }
    
    
    @nth(4) {
      transform: scale(@r(.1, .4));
      @place-cell: 410px 35px;
      background-color: #ffb300;
    }
    
    @nth(5) {
      transform: scale(@r(.1, .4));
      @place-cell: 85px 200px;
      background-color: #ffb300;
    }
    
    @nth(6) {
      transform: scale(@r(.1, .4));
      @place-cell: 470px 370px;
      background-color: #ffb300;
    }
    
    @nth(7) {
      transform: scale(@r(.1, .2));
      @place-cell: 440px 350px;
      background-color: #ffb300;
    }

    @keyframes blink {
      0%, 40%, 100% {
        transform: scale(@r(.4, .8));
      }

      20% {
        transform: scale(@r(.1, .4));
        ;
      }

      80% {
        transform: scale(@r(.9, 2));
        ;
      }
    }
    );

    --rule-spells:( :doodle {
      @grid: 15 x 25 / 15vmin 30vmin;
      box-sizing: border-box;
      grid-gap: 1px;
      z-index: 3;
    }
    :after {
      content: \@hex(@rand(0, 500));
      transform: scale(@r(.1, .9)) translateY(@r(1px, 3px));
      color: #ffb300;
      opacity: @r(0, 1);
      animation: move ease-in-out @r(5s, 10s) @r(-0.1s, -1s) infinite;
    }
    @keyframes move {
      0%, 40%, 100% {
        transform: scale(@r(.1, .9)) translateY(@r(1px, 3px));
      }
      20% {
        transform: scale(@r(.1, .3)) translateY(@r(3px, 6px));
        ;
      }
      80% {
        transform: scale(@r(.7, .9)) translateY(@r(-2px,
        1px));
        ;
      }
    }
    );
  }
</style>

<div class="container">
  <div class="starsWrapper">
    <css-doodle use="var(--rule-stars)">

    </css-doodle>
  </div>
  <div class="ray">
    <css-doodle use="var(--rule-spells)"></css-doodle>
  </div>

  <div class="bookWrapper">
    <svg viewBox="0 0 496 496">
<path style="fill:#2196f3;" d="M472,116.07H24c-13.234,0-24,10.766-24,24v264c0,13.234,10.766,24,24,24h448
	c13.234,0,24-10.766,24-24v-264C496,126.836,485.234,116.07,472,116.07z"/>
<rect x="224" y="388.07" style="fill:#064acb;" width="48" height="40"/>
<path style="fill:#366ed8;" d="M464.219,364.07v24c0,4.418-3.582,8-8,8h-416c-4.418,0-8-3.582-8-8v-24l47.781-24l192,8l160-8
	L464.219,364.07z"/>
<path style="fill:#beeef7;" d="M43.443,375.116c65.739-27.139,140.084-25.487,204.776,4.954v-288
	C181.394,60.625,104.27,59.9,36.97,89.894c-2.896,1.291-4.751,4.222-4.751,7.393v270.515
	C32.219,373.581,38.102,377.321,43.443,375.116z"/>
<path style="fill:#6fc2d0;" d="M248.219,380.07c64.692-30.442,139.037-32.093,204.776-4.954
	c5.341,2.205,11.224-1.535,11.224-7.314V97.287c0-3.171-1.855-6.102-4.751-7.393c-67.3-29.994-144.425-29.269-211.249,2.176
	V380.07z"/>
</svg>
  </div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;
  
  .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 500px;
    border: 20px solid white;
    background: #373a6d;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    
    .starsWrapper {
      width: 100%;
      height: 100%;  
    }
    
    .ray {
      position: absolute;
      top: 80px;
      left: 150px;
      height: 200px;
      width: 200px;
      border-radius: 50%;
      box-shadow: 0px 0px 20px 20px rgba(#beeef7, .1);
      background: rgba(#beeef7, .1);
      overflow: hidden;
      z-index: 3;
      animation: float ease-in-out 30s infinite;
    }
    
    .bookWrapper {
      position: absolute;
      bottom: 0;
      z-index: 1;
      svg {
        width: 250px;
        height: 250px;
      }
    }
  }
  
  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.2/css-doodle.min.js