<div></div>
// as seen on a.singlediv.com

// helpers
book-height(height)
  linear-gradient(to bottom, #111 height, transparent height)

book-grey(start,end)
  linear-gradient(to right, transparent start, #222 start,
                            #2e2e2e end, transparent end)
book-color(color,shade,start,end)
  linear-gradient(to right, transparent start, color start,
                            darken(color,shade) end, transparent end)

// black and white books
div
  width: 100vw
  height: 100vh
  min-height: 350px
  margin: 0
  position: relative
  background-color: #111
  background-image: linear-gradient(to top, #222 5%, #111 6%,
                                            #111 7%, transparent 7%),
                    book-height(30%),

                    linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), // book 1
                    book-grey(  6%, 9%), // book 2
                    book-grey( 27%,34%), // book 6
                    book-grey( 51%,57%), // book 11

                    book-height(35%),
                    book-grey( 42%,44%), // book 8
                    book-grey( 45%,47%), // book 9
                    book-grey( 48%,50%), // book 10
                    book-grey( 87%,91%), // book 13

                    book-height(37.5%),
                    book-grey( 14%,20%), // book 4

                    book-height(40%),
                    book-grey( 10%,13%), // book 3
                    book-color(#222,3,21%,25%), // book 5
                    book-grey( 58%,64%), // book 12
                    book-grey( 92%,95%), // book 14

                    book-height(48%),
                    book-color(#222,3,96%,99%), // book 15
                    linear-gradient(to bottom, transparent 68.5%,
                                               transparent 76%,
                                               #111 76%,
                                               #111 77.5%,
                                               transparent 77.5%,
                                               transparent 86%,
                                               #111 86%,
                                               #111 87.5%,
                                               transparent 87.5%),
                    book-grey( 35%,41%), // book 7

                    book-height(68%),
                    linear-gradient(to right, transparent 78%,
                                              #333 78%,
                                              #333 80%,
                                              transparent 80%,
                                              transparent 82%,
                                              #333 82%,
                                              #333 83%,
                                              transparent 83%),
                    book-grey( 66%,85%) // box
  background-size: 300px 150px
  background-position: center bottom

  // colorful books
  &:before
    content: ''
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background-color: #111
    background-image: linear-gradient(to top, tan 5%, #111 6%,
                                              #111 7%, transparent 7%),
                      book-height(30%),

                      linear-gradient(to right, firebrick, darken(firebrick,10) 5%, transparent 5%), // book 1
                      book-color(tomato,10,6%, 9%), // book 2
                      book-color(darkolivegreen,10,27%,34%), // book 6
                      book-color(salmon,10,51%,57%), // book 11

                      book-height(35%),
                      book-color(teal,10,42%,44%), // book 8
                      book-color(teal,10,45%,47%), // book 9
                      book-color(teal,10,48%,50%), // book 10
                      book-color(lightslategrey,17,87%,91%), // book 13

                      book-height(37.5%),
                      book-color(darkkhaki,15,14%,20%), // book 4

                      book-height(40%),
                      book-color(olive,10,10%,13%), // book 3
                      book-color(saddlebrown,10,21%,25%), // book 5
                      book-color(saddlebrown,10,58%,64%), // book 12
                      book-color(darkslategrey,10,92%,95%), // book 14

                      book-height(48%),
                      book-color(darkslategrey,10,96%,99%), // book 15
                      linear-gradient(to bottom, transparent 68.5%,
                                                 transparent 76%,
                                                 #111 76%,
                                                 #111 77.5%,
                                                 transparent 77.5%,
                                                 transparent 86%,
                                                 #111 86%,
                                                 #111 87.5%,
                                                 transparent 87.5%),
                      book-color(indianred,10,35%,41%), // book 7

                      book-height(68%),
                      linear-gradient(to right, transparent 78%,
                                                rosybrown 78%,
                                                rosybrown 80%,
                                                transparent 80%,
                                                transparent 82%,
                                                rosybrown 82%,
                                                rosybrown 83%,
                                                transparent 83%),
                      book-color(brown,10,66%,85%) // box
    background-size: 300px 150px
    background-position: center bottom
    clip-path: circle(150px at center center)
    animation: flashlight 5000ms infinite

  // eyes
  &:after
    content: ''
    width: 25px
    height: 10px
    position: absolute
    left: calc(50% + 59px)
    bottom: 100px
    background-repeat: no-repeat
    background-image: radial-gradient(circle, white 50%, transparent 50%),
                      radial-gradient(circle, white 50%, transparent 50%)
    background-size: 10px 10px
    background-position: left center, right center
    animation: eyes 5000ms infinite

@keyframes flashlight
  0%, 9%
    opacity: 0
    clip-path: circle(150px at 45% 10%)
  10%, 15%, 85%
    opacity: 1
  50%
    clip-path: circle(150px at 60% 20%)
  54%, 100%
    clip-path: circle(150px at 55% 92%)
  88%, 100%
    opacity: 0

@keyframes eyes
  0%, 52%
    opacity: 0
  53%, 87%
    opacity: 1
  64%
    transform: scaleY(1)
  67%
    transform: scaleY(0)
  70%
    transform: scaleY(1)
  88%, 100%
    opacity: 0
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.