Holidays Are Coming! 3D CSS Truck 🎅🎄

HTML

              
                - const randomInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
mixin cuboid(className)
  .cuboid(class=className)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++
.scene__wrapper
  .scene
    .truck
      .truck__front
        +cuboid('truck__chassis')
        +cuboid('truck__wheels truck__wheels--rear')
        +cuboid('truck__wheels truck__wheels--nsf')
        +cuboid('truck__wheels truck__wheels--osf')

        +cuboid('truck__body truck__rear-cab')
        +cuboid('truck__body truck__cab')
        +cuboid('truck__body truck__bonnet')
        +cuboid('truck__bumper truck__bumper--front')
        +cuboid('truck__bumper truck__bumper--rear')
        +cuboid('truck__headlight truck__headlight--nsf')
        +cuboid('truck__headlight truck__headlight--osf')
        +cuboid('truck__pipe truck__pipe--nsf')
        +cuboid('truck__pipe truck__pipe--osf')
        +cuboid('truck__cab-top')
      .truck__back
        +cuboid('trailer__bottom')
        +cuboid('trailer__mid')
        .cuboid.trailer__top
          .cuboid__side
            svg.truck__logo(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 202 67.5')
              path(d='M168 57l-3 2-1-1 2-7c3-5 6-10 11-14l3-1v1l-4 7-8 13zm-26-11s-3-1-4-4 1-5 3-6h3l1 2-1 2-2 6zm-12 12l-1-2c0-3 4-10 7-13l5 5c-2 4-9 13-11 10zm47 1l-2-1 5-8 9-17h-6l-1 2-2-2c-2-1-4 0-5 1-7 4-12 12-16 18 0 0-4 7-7 7-2 0-1-2-1-3 0-4 2-8 4-11l10-9c8-7 14-15 15-17h-2c-6 8-18 20-21 22 1-4 11-22 20-31l1-1 7-5v1l-1 4-1 2 2-1 2-7-2-1c-2-1-5 1-7 3-12 9-22 22-31 40l-3 1 2-7 1-2-2-4h-5c-6 3-11 9-14 14-2 4-4 7-4 11-1 3 0 6 2 7l5-1c6-3 10-10 14-16h3v2c-3 7-4 11-2 13 3 4 8 0 12-5-1 6 3 7 5 7l7-5c0 1 0 5 2 5l5-2c5-2 11-12 13-15h-2l-9 11zM96 23h6l3-5h-6zm96-15c-5 3-10 5-15 4l-5 6c8 2 17-3 21-7 5-4 8-10 8-10s-4 4-9 7zm-51-1c-1 11-9 17-11 18-2 0-4 0-2-5 3-6 8-11 13-14v1zm-16 28c-1-2-2-2-4-2-5 0-10 4-12 10-2 3-3 6-3 10l8-7 3-7c1-1 3-4 5-3s1 6-1 11l-7 10c-3 2-7 4-10 2-2-1-3-3-3-7 1-9 5-17 11-26 7-8 14-17 23-21l5-1s-9 5-13 14c-1 2-2 5-1 8l3 1c5-1 9-6 11-10a24 24 0 003-12c3-1 7 1 7 1l15 9 5-5-2-1-9-5c-6-4-12-3-15-2l-2 1c-2-2-6-2-8-1-9 2-18 9-27 20-7 8-11 16-13 23-2 5-2 13 2 17 3 4 8 3 11 2 8-4 14-11 17-20 1-3 2-7 1-9zm-80-9l-1 3h-2l-3-3c-1-3 2-5 3-6h3l1 2-1 4zm-3 5v1l-3 4-6 7-2-1c-2-1-1-3 0-5a46 46 0 016-10c1 2 3 4 5 4zm35-2l5-7c3-3 4-2 4-1a579 579 0 01-14 22h-2v-1c0-2 2-7 7-13zM46 17c-4-2-11 3-17 11-6 7-8 16-6 20 4 4 11-3 14-6l1-1 5-7 2-3h3s-5 7-4 11c0 1 0 6 4 7 5 1 10-3 14-7l1-1v1c-2 5 0 7 2 7 4 1 9-5 9-5 0 2-1 4 1 5s4 0 5-1c6-4 10-10 13-15h-2s-5 8-9 10h-1v-2l14-23h-7v1l-1-1c-4-5-12 3-19 13l-9 11s-5 5-7 1l-1-4c3-8 7-14 12-18l4-1v2l-3 1c-1 2-2 3-1 5 2 3 7-3 6-7 0-2 0-3-2-4h-5l-8 6c-2 3-7 6-8 6 0-1 4-9 0-12zm32 41c-8-5-18-6-34-1-17 4-23 7-31 1-3-2-4-6-3-12 2-10 7-19 15-30 5-5 10-10 16-12 4-1 4 3 3 3l-2 1-2 4c0 3 3 2 4 1 2-2 4-6 2-10l-3-2c-6 0-11 2-16 5C17 13 9 23 4 34c-2 6-5 16-1 23 3 6 8 8 15 8l15-3c4-1 24-8 31 4 0 0 2-4 8-4 4-1 11 1 16 4l-10-8z' fill='#fff')

          .cuboid__side
            svg.truck__logo(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 202 67.5')
              path(d='M168 57l-3 2-1-1 2-7c3-5 6-10 11-14l3-1v1l-4 7-8 13zm-26-11s-3-1-4-4 1-5 3-6h3l1 2-1 2-2 6zm-12 12l-1-2c0-3 4-10 7-13l5 5c-2 4-9 13-11 10zm47 1l-2-1 5-8 9-17h-6l-1 2-2-2c-2-1-4 0-5 1-7 4-12 12-16 18 0 0-4 7-7 7-2 0-1-2-1-3 0-4 2-8 4-11l10-9c8-7 14-15 15-17h-2c-6 8-18 20-21 22 1-4 11-22 20-31l1-1 7-5v1l-1 4-1 2 2-1 2-7-2-1c-2-1-5 1-7 3-12 9-22 22-31 40l-3 1 2-7 1-2-2-4h-5c-6 3-11 9-14 14-2 4-4 7-4 11-1 3 0 6 2 7l5-1c6-3 10-10 14-16h3v2c-3 7-4 11-2 13 3 4 8 0 12-5-1 6 3 7 5 7l7-5c0 1 0 5 2 5l5-2c5-2 11-12 13-15h-2l-9 11zM96 23h6l3-5h-6zm96-15c-5 3-10 5-15 4l-5 6c8 2 17-3 21-7 5-4 8-10 8-10s-4 4-9 7zm-51-1c-1 11-9 17-11 18-2 0-4 0-2-5 3-6 8-11 13-14v1zm-16 28c-1-2-2-2-4-2-5 0-10 4-12 10-2 3-3 6-3 10l8-7 3-7c1-1 3-4 5-3s1 6-1 11l-7 10c-3 2-7 4-10 2-2-1-3-3-3-7 1-9 5-17 11-26 7-8 14-17 23-21l5-1s-9 5-13 14c-1 2-2 5-1 8l3 1c5-1 9-6 11-10a24 24 0 003-12c3-1 7 1 7 1l15 9 5-5-2-1-9-5c-6-4-12-3-15-2l-2 1c-2-2-6-2-8-1-9 2-18 9-27 20-7 8-11 16-13 23-2 5-2 13 2 17 3 4 8 3 11 2 8-4 14-11 17-20 1-3 2-7 1-9zm-80-9l-1 3h-2l-3-3c-1-3 2-5 3-6h3l1 2-1 4zm-3 5v1l-3 4-6 7-2-1c-2-1-1-3 0-5a46 46 0 016-10c1 2 3 4 5 4zm35-2l5-7c3-3 4-2 4-1a579 579 0 01-14 22h-2v-1c0-2 2-7 7-13zM46 17c-4-2-11 3-17 11-6 7-8 16-6 20 4 4 11-3 14-6l1-1 5-7 2-3h3s-5 7-4 11c0 1 0 6 4 7 5 1 10-3 14-7l1-1v1c-2 5 0 7 2 7 4 1 9-5 9-5 0 2-1 4 1 5s4 0 5-1c6-4 10-10 13-15h-2s-5 8-9 10h-1v-2l14-23h-7v1l-1-1c-4-5-12 3-19 13l-9 11s-5 5-7 1l-1-4c3-8 7-14 12-18l4-1v2l-3 1c-1 2-2 3-1 5 2 3 7-3 6-7 0-2 0-3-2-4h-5l-8 6c-2 3-7 6-8 6 0-1 4-9 0-12zm32 41c-8-5-18-6-34-1-17 4-23 7-31 1-3-2-4-6-3-12 2-10 7-19 15-30 5-5 10-10 16-12 4-1 4 3 3 3l-2 1-2 4c0 3 3 2 4 1 2-2 4-6 2-10l-3-2c-6 0-11 2-16 5C17 13 9 23 4 34c-2 6-5 16-1 23 3 6 8 8 15 8l15-3c4-1 24-8 31 4 0 0 2-4 8-4 4-1 11 1 16 4l-10-8z' fill='#fff')

          .cuboid__side
          .cuboid__side
          .cuboid__side
          .cuboid__side
        +cuboid('truck__wheels truck__wheels--trailer')
    .snow
      - let s = 0
      while s < 10
        -
          const speed = randomInRange(5, 10)
          const delay = randomInRange(2, 10)
          const x = Math.random() * 100
          const y = Math.random() * 100
          const size = randomInRange(0.1, 1)
        .snowball(style=`--s: ${speed}; --d: ${delay}; --x: ${x}; --y: ${y}; --size: ${size};`)
        - s++

CSS

              
                *
  box-sizing border-box
  transform-style preserve-3d

:root
  --red-one hsl(358, 100%, 48%)
  --red-two hsl(358, 100%, 38%)
  --red-three hsl(358, 100%, 28%)
  --grey-one hsl(0, 0%, 90%)
  --grey-two hsl(0, 0%, 80%)
  --grey-three hsl(0, 0%, 70%)
  --grey-four hsl(0, 0%, 60%)
  --grey-five hsl(0, 0%, 50%)
  --windscreen hsl(200, 32%, 30%)
  --glow hsl(45, 80%, 80%)
  --bg hsl(0, 0%, 5%)
  --perspective 1000
  --rotate-x -15
  --rotate-y -95
  --scene-width 100
  --scene-height 100
  --drive 5
  --offset -0.25


.cuboid {
  // Defaults
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin));
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

body
  min-height 100vh
  background var(--bg)
  display flex
  align-items center
  justify-content center
  overflow hidden
  perspective calc(var(--perspective, 1000) * 1px)

.scene__wrapper
  transform scale(.8)
.scene
  height calc(var(--scene-height, 50) * 1vmin)
  width calc(var(--scene-width, 50) * 1vmin)
  transform rotateX(calc(var(--rotate-x, -34) * 1deg)) rotateY(calc(var(--rotate-y, 34) * 1deg)) rotateX(90deg) rotate(180deg)

.snow
  height 100%
  width 100%
  position absolute
  transform translate3d(0, 0, 100vmax)

.snowball
  position absolute
  background white
  border-radius 50%
  left calc(var(--x) * 1%)
  top calc(var(--y) * 1%)
  height calc(var(--size) * 1%)
  width calc(var(--size) * 1%)
  animation fall calc(var(--s) * 1s) calc(var(--d) * -1s) infinite linear

@keyframes fall
  from
    transform translate3d(0, 0, 0) rotateX(90deg)
  to
    transform translate3d(0, 0, -100vmax) rotateX(90deg)


.truck
  &__front
    height 8vmin
    width 17vmin
    position absolute
    // display none
    // offset-distance 92%
    // opacity 0.5
    offset-path path(var(--path))
    animation travel calc(var(--drive) * 1s) calc(var(--offset) * 1s) infinite linear

    &:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background hsla(45, 80%, 80%, 0.75)
      filter brightness(1.2) blur(10px)
      border-radius 50%
      transform scale(1.25)


  &__back
    height 8vmin
    width 26vmin
    position absolute
    // opacity 0.5
    offset-path path(var(--path))
    offset-distance 0%
    animation travel calc(var(--drive) * 1s) infinite linear
    // transform translate(0, 0)

    &:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background hsla(45, 80%, 80%, 0.75)
      filter brightness(1.2) blur(10px)
      border-radius 50%
      transform scale(1.25)

  &__logo
    position absolute
    width 70%
    top 50%
    left 50%
    transform translate(-50%, -50%)

  &__wheels

    div
      background var(--red-two)

    div:nth-of-type(1)
    div:nth-of-type(2)
      background radial-gradient(var(--red-one) 0 30%, black 32% 65%, transparent 70%) 0 0 / 2vmin 100%
      // background-color var(--bg)

    div:nth-of-type(3)
    div:nth-of-type(4)
      background linear-gradient(var(--red-three) 65%, var(--bg) 70%)

    div:nth-of-type(6)
      background transparent

    &--nsf
      --height 2
      --width 2
      --depth 1
      --z 1
      --x 1
      --y 0.5
    &--osf
      --height 2
      --width 2
      --depth 1
      --z 1
      --x 1
      --y 6.5

    &--rear
      --height 2
      --width 4
      --depth 7
      --z 1
      --y 0.5
      --x 13

    &--trailer
      --height 2
      --width 6
      --depth 7
      --z 1
      --y 0.5
      --x 19



  &__bonnet
    --height 3
    --z 2
    --depth 5
    --y 1.5
    --x 0.5
    --width 7

    div
      background var(--red-one)

      &:nth-of-type(3)
      &:nth-of-type(4)
        background var(--red-three)

      &:nth-of-type(4)
        background repeating-linear-gradient(90deg, var(--grey-four) 0 2%, var(--grey-two) 2% 6%, var(--grey-four) 6% 8%) 50% 50% / 80% 80%
        background-repeat no-repeat
        background-color var(--red-three)

      &:nth-of-type(5)
        background var(--red-two)

  &__rear-cab
    --height 6
    --width 3
    --depth 6
    --x 7
    --y 1
    --z 4.5

    div
      background var(--red-one)

      &:nth-of-type(1)
      &:nth-of-type(2)
        &:after
          content ''
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          border 0.5vmin solid var(--glow)
          filter blur(1.5px)
          transform scale(1.025)

      &:nth-of-type(3)
      &:nth-of-type(4)
        background var(--red-three)

      &:nth-of-type(5)
        background var(--red-two)

  &__cab
    --height 4
    --width 3
    --depth 5
    --z 3.5
    --y 1.5
    --x 4
    div
      background var(--red-one)

      &:nth-of-type(3)
      &:nth-of-type(4)
        background var(--red-three)

      &:nth-of-type(1):after
      &:nth-of-type(2):after
        content ''
        position absolute
        top 5%
        right 15%
        left 10%
        height 40%
        background radial-gradient(transparent 0 50%, hsla(0, 0%, 100%, 0.25)) no-repeat
        background-color var(--windscreen)

      &:nth-of-type(4):after
        content ''
        position absolute
        top 5%
        left 5%
        right 5%
        height 40%
        background radial-gradient(transparent 0 65%, hsla(0, 0%, 100%, 0.25)) no-repeat
        background-color var(--windscreen)

      &:nth-of-type(5)
        background var(--red-two)

  &__cab-top
    --height 1
    --width 2
    --depth 5
    --z 6
    --y 1.5
    --x 5
    div

      &:nth-of-type(3)
      &:nth-of-type(4)
      &:nth-of-type(5)
      &:nth-of-type(6)
        background transparent

      &:nth-of-type(4):after
        content ''
        position absolute
        bottom 0
        left 0
        right 0
        height 220%
        background-image url("https://assets.codepen.io/605876/cola-logo.svg")
        background-size contain
        background-position center
        background-color var(--red-two)
        background-repeat no-repeat
        transform-origin 50% 100%
        transform rotateX(65deg)

      &:nth-of-type(1)
        background linear-gradient(155deg, transparent 0 50%, var(--red-one) 50% 100%)
      &:nth-of-type(2)
        background linear-gradient(-155deg, transparent 0 50%, var(--red-one) 50% 100%)

  &__chassis
    --height 1
    --width 14
    --z 1
    --depth 5.5
    --y 1.25
    --x 2

    div
      background var(--grey-three)

      &:nth-of-type(5)
      &:nth-of-type(6)
        background var(--grey-four)

  &__bumper
    div
      background var(--grey-two)

      &:nth-of-type(5)
      &:nth-of-type(6)
        background var(--grey-five)
      &:nth-of-type(1)
      &:nth-of-type(2)
        background var(--grey-four)

    &--front
      --depth 7
      --height 0.75
      --y 0.5
      --width 0.5
      --z 0.75

    &--rear
      --depth 7
      --height 0.75
      --y 0.5
      --width 0.5
      --z 0.75
      --x 17

  &__headlight
    --depth 1
    --height 0.5
    --width 0.5
    --z 1.5

    div
      background var(--grey-five)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background var(--grey-three)
      &:nth-of-type(5)
      &:nth-of-type(6)
        background var(--grey-four)

      &:nth-of-type(4)
        background white

        &:after
          content ''
          height 100%
          width 100%
          background white
          position absolute
          top 0
          left 0
          filter blur(5px)

    &--nsf
      --y 0.5
    &--osf
      --y 6.5

  &__pipe
    --width 0.5
    --depth 0.5
    --height 7
    --x 9.5
    --z 5.5

    &--nsf
      --y 0.5
    &--osf
      --y 7

    div
      background var(--grey-two)

      &:nth-of-type(3)
      &:nth-of-type(4)
        background var(--grey-three)
      &:nth-of-type(5)
        background linear-gradient(black, black) 30% 30% / 60% 60% no-repeat
        background-color var(--grey-five)

.trailer
  &__bottom
    --height 0.5
    --width 15
    --depth 6
    --z 1.5
    --x 9
    --y 1

    div
      background var(--grey-five)

  &__mid
    --height 1
    --width 17
    --depth 6
    --y 1
    --z 2.5
    --x 9

    div
      background var(--red-three)

  &__top
    --height 8
    --width 23
    --depth 8
    --z 6.5
    --x 4

    div
      border 0.5vmin solid var(--glow)
      background var(--red-one)

      &:nth-of-type(3):after
        content ''
        background-image url('https://p7.hiclipart.com/preview/764/971/762/the-coca-cola-company-fizzy-drinks-santa-claus-santa-s-sleigh.jpg')
        background-size contain
        background-color white
        background-repeat no-repeat
        border-radius 50%
        overflow hidden
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%) scale(0.8)
        height 100%
        width 100%



      &:nth-of-type(3)
      &:nth-of-type(4)
        background var(--red-three)

      &:nth-of-type(5)
      &:nth-of-type(6)
        background var(--red-two)

.holiday-road
  height 50vmin
  width 50vmin
  // Purely for CodePen
  overflow visible !important

  path
    stroke red

@keyframes travel
  from
    offset-distance 100%

JS

              
                import Meanderer from 'https://cdn.skypack.dev/meanderer'

const width = 64.228
const height = 27.004
const path =
  'M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33 2.173 16.838.747 14.132.24 13.01.028 11.818.152 10.71.43 8.61.96 6.534 1.85 4.826 3.18a11.59 11.59 0 00-3.262 3.998C.624 9.104.186 11.304.136 13.446c-.04 1.678.287 3.389.884 4.957.602 1.579 1.477 3.106 2.655 4.318 1.545 1.59 3.456 2.957 5.564 3.645 1.786.583 3.783.636 5.629.288 1.861-.35 3.56-1.354 5.18-2.334 1.82-1.1 3.429-2.525 5.021-3.934 3.71-3.281 6.94-7.07 10.522-10.49 1.692-1.614 3.369-3.253 5.18-4.732 1.614-1.318 3.155-2.82 5.054-3.678C47.606.68 49.595.147 51.549.206c2.04.062 4.1.705 5.884 1.696 1.492.827 2.796 2.047 3.806 3.421 1.138 1.55 1.896 3.39 2.399 5.245.361 1.334.547 2.75.415 4.126-.155 1.628-.675 3.238-1.407 4.7-.754 1.507-1.775 2.913-3.006 4.062-1.202 1.122-2.603 2.12-4.157 2.655-1.701.585-3.583.692-5.373.511-1.819-.183-3.611-.78-5.245-1.599-1.833-.92-3.405-2.304-4.957-3.645-2.811-2.43-7.834-7.932-7.834-7.932'
const SCENE = document.querySelector('.scene')

const HOLIDAY_ROAD = new Meanderer({
  path,
  height,
  width,
})

const setPath = () => {
  const scaled = HOLIDAY_ROAD.generatePath(
    SCENE.offsetWidth,
    SCENE.offsetHeight
  )
  SCENE.style.setProperty('--path', `"${scaled}"`)
}

const SizeObserver = new ResizeObserver(setPath)
SizeObserver.observe(SCENE)

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions