mixin wheel(pos)
  .truck__wheel-container(class=`truck__wheel-container--${pos}`)
    .truck__wheel
      .truck__coilover
      .truck__wheel-face
        .truck__wheel-hub
          .truck__wheel-alloy
            - let s = 0
            while s < 5
              .truck__wheel-spoke(style=`--s: ${s++}`)
label(for='terrain')
  span Level of Terrain
  span (Enter Value > 5)
input#terrain(type='number', min='0', max='5', value='0')

.truck(style=`--truck-hue: 280`)
  .truck__body-wrapper
    .truck__body
      .truck__front
        .truck__grill
          .truck__headlight.truck__headlight--left
          .truck__grill-vent
          .truck__headlight.truck__headlight--right
        .truck__front-bumper
        .truck__bonnet
      .truck__engine-block-wrapper
        .truck__engine-block
          .truck__engine-block-head
            .truck__engine-block-front
              .truck__engine-block-hole
          .truck__engine-block-base
      .truck__cab
        .truck__windshield
        .truck__side-window-frame
        .truck__wing-mirror.truck__wing-mirror--right
        .truck__wing-mirror.truck__wing-mirror--left
      .truck__light-bar
        .truck__light-bar-light
      .truck__side-body
        .truck__rear-bumper
        .truck__tail-light
        .truck__wheel-arch.truck__wheel-arch--front
        .truck__wheel-arch.truck__wheel-arch--back
        .truck__side-step
      .truck__bars
        .truck__bar.truck__bar--vertical
        .truck__bar.truck__bar--horizontal
  .truck__chassis
    +wheel('osf')
    +wheel('osr')
    .truck__underbody
    .truck__chassis-beam.truck__chassis-beam--horizontal.truck__chassis-beam--horizontal-left
      .truck__chassis-beam.truck__chassis-beam--vertical.truck__chassis-beam--vertical-left
      .truck__chassis-beam.truck__chassis-beam--vertical.truck__chassis-beam--vertical-right
    .truck__chassis-beam.truck__chassis-beam--horizontal.truck__chassis-beam--horizontal-right
      .truck__chassis-beam.truck__chassis-beam--vertical.truck__chassis-beam--vertical-left
      .truck__chassis-beam.truck__chassis-beam--vertical.truck__chassis-beam--vertical-right
    +wheel('nsf')
    +wheel('nsr')
View Compiled
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap')
*
  box-sizing border-box
  transition all .25s ease

body
  background-color var(--bg)
  min-height 100vh
  display flex
  align-items center
  justify-content center
  flex-direction column
  font-family 'Fredoka One', cursive
  overflow visible

label
  position absolute
  font-size 30px
  top calc(50% + (var(--size) * 0.15px))

  span:nth-of-type(2)
    font-weight 300
    font-size 16px
    position absolute
    left 102%
    white-space nowrap
    bottom 0%
    transform translate(0, -25%)
    color hsl(0, 0%, 50%)

input
  font-size 2rem
  position absolute
  width 120px
  padding 10px
  top calc(50% + (var(--size) * 0.15px) + 44px)
  z-index 2
  text-align center

  &:in-range
    border 5px solid hsl(100, 80%, 70%)

  &:out-of-range
    border 5px solid hsl(15, 80%, 70%)
    animation shake .1s infinite alternate

@keyframes shake
  0%, 100%
    transform translate(0, 0) rotate(0deg)
  25%
    transform translate(-1%, 3%) rotate(-2deg)
  50%
    transform translate(1%, 2%) rotate(2deg)
  75%
    transform translate(1%, -2%) rotate(-1deg)

@keyframes shake-truck
  0%, 100%
    transform translate(0, -50%) rotate(0deg)
  25%
    transform translate(0, -50%) rotate(-2deg)
  50%
    transform translate(0, -50%) rotate(2deg)
  75%
    transform translate(0, -50%) rotate(-1deg)

:root
  --bg hsl(0, 0%, 96%)
  --size 300
  --truck-hue 0
  --chrome-hue 58
  --glass-hue 200
  --indicator-hue 40
  --tail-light-hue 15
  --trim-width 2
  --plastic-lightness 20
  --coilover-lightness 15
  --grill-lightness 60
  --chrome-lightness 80
  --chrome-lightness-highlight 95
  --chassis-lightness 20

@media(min-width 768px)
  :root
    --trim-width 4
    --size 600

@media(max-height 600px)
  :root
    --trim-width 2
    --size 400

/**
 * Things that need to move when out of range
 * 1. Light bar appears
 * 2. Wheels scale
 * 3. Suspension scales
 * 4. Truck body rises
 * 5. Engine block pops out
*/
input:out-of-range ~ .truck
  --elevated 1
  .truck__body-wrapper
    --multiplier 0.18
  .truck__engine-block-wrapper
    --engine-rise 0
  .truck__light-bar
    --light-bar-scale 1
  .truck__wheel-container
    --wheel-scale 2
  .truck__underbody
    --multiplier .26


.truck
  --coilover 'hsl(%s, 100%, %s)' % (var(--truck-hue) calc(var(--coilover-lightness) * 1%))
  --chassis 'hsl(%s, 100%, %s)' % (var(--truck-hue) calc(var(--chassis-lightness) * 1%))
  --plastic 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--plastic-lightness) * 1%))
  --grill 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--grill-lightness) * 1%))
  --chrome 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--chrome-lightness) * 1%))
  --chrome-highlight 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--chrome-lightness-highlight) * 1%))
  --wheel-height calc(var(--size) * .12)
  --wheel-width calc(var(--size) * .14)
  height calc(var(--size) * 1px)
  position absolute
  top 50%
  left 50%
  width calc(var(--size) * 1px)
  transform translate(-50%, -90%)
  transform-style preserve-3d
  animation upsydownsy 5s infinite linear


  @keyframes upsydownsy
    0%, 100%
      transform translate(-50%, -90%)
    50%
      transform translate(-50%, -92%)

  &__body-wrapper
    --multiplier 0
    --multiplier .39
    // --multiplier 0.18
    position absolute
    transform translate(0, calc((var(--size) * var(--multiplier)) * 1px))
    width 100%
    z-index 3

  &__body
    animation body-rumble .1s infinite ease-in-out

    @keyframes body-rumble
      0%, 100%
        transform translate3d(0, 0)
      50%
        transform translate(0, calc(var(--size) * .0015px))

  &__front
    border-radius 5% 5% 0 0 / 15% 15% 0 0
    position absolute
    top calc(var(--size) * 0.425px)
    right 4%
    height calc(var(--size) * 0.1px)
    width calc(var(--size) * 0.295px)
    background 'hsl(%s, 100%, 40%)' % (var(--truck-hue))
    z-index 5

  &__grill
    // border-radius 5% 5% 0 0 / 20% 20% 0 0
    height 85%
    width 100%
    --bg var(--grill)
    --chrome-highlight 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc((var(--grill-lightness) + 20) * 1%))
    background linear-gradient(125deg, transparent, transparent 25%, var(--chrome-highlight) 25%, var(--chrome-highlight) 30%, transparent 30%, transparent 35%, var(--chrome-highlight) 35%, var(--chrome-highlight) 45%, transparent 45%), var(--bg)
    position absolute
    bottom 5%
    left 0
    overflow hidden

  &__front-bumper
    border-radius calc(var(--trim-width) * 1px)
    position absolute
    top 100%
    width 116%
    height 45%
    background linear-gradient(125deg, var(--chrome), var(--chrome) 10%, var(--chrome-highlight) 10%, var(--chrome-highlight) 15%, var(--chrome) 15%, var(--chrome) 20%, var(--chrome-highlight) 20%, var(--chrome-highlight) 30%, var(--chrome) 30%)
    left -6%

    &:before
      left 28%

    &:after
      left 57%


  &__headlight
    border-radius 10%
    position absolute
    height calc(var(--size) * 0.046px)
    width calc(var(--size) * 0.046px)
    background white
    top 15%
    width 15%

    &:after
      border-radius 10%
      content ''
      background 'hsl(%s, 100%, 50%)' % (var(--indicator-hue))
      position absolute
      height 30%
      width 100%
      top 110%

    &--left
      left 5%

    &--right
      right 5%

  &__grill-vent
    position absolute
    bottom 15%
    height 70%
    width 54%
    z-index 2
    left 50%
    transform translate(-50%, 0)
    --black 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--plastic-lightness) * 1%))
    background repeating-linear-gradient(0deg, var(--black) 0, var(--black) 20%, transparent 20%, transparent 40%)

  &__bonnet
    background 'hsl(%s, 100%, 40%)' % (var(--truck-hue))
    border-radius 2% 2% 0 0 / 100% 100% 0 0
    width 160%
    position absolute
    top 0
    right 0
    height 15%

    &:before
      // aerial
      position absolute
      content ''
      height 1200%
      width 1%
      background var(--chrome)
      bottom 90%
      left 10%
      transform-origin bottom center
      animation sway .2s infinite ease

      @keyframes sway
        0%, 100%
          transform rotate(0deg)
        50%
          transform rotate(-15deg)

  &__cab
    --glass 'hsl(%s, 100%, 60%)' % (var(--glass-hue))
    --glass-highlight 'hsl(%s, 100%, 90%)' % (var(--glass-hue))
    height calc(var(--size) * 0.12px)
    width calc(var(--size) * 0.425px)
    position absolute
    top calc(var(--size) * 0.32px)
    left 28%
    z-index 2

  &__windshield
    background 'hsl(%s, 100%, 50%)' % (var(--truck-hue))
    border-radius 0 15% 0 0
    position absolute
    height 100%
    width 60%
    right 0
    top 0
    transform skewX(30deg)
    z-index 2

    &:after
      content ''
      position absolute
      height 80%
      width 85%
      background linear-gradient(140deg, transparent 0, transparent 10%, var(--glass-highlight) 10%, var(--glass-highlight) 15%, transparent 15%, transparent 20%, var(--glass-highlight) 20%, var(--glass-highlight) 30%, transparent 30%), var(--glass)
      top 10%
      left 10%
      border-radius 8% 15% 0 0

  &__wing-mirror
    background var(--chrome)
    position absolute
    top 55%
    height 25%
    width 10%
    border-radius 25%

    &--left
      z-index 3
      left 25%
      border-radius 25% 5% 5% 25%

      &:after
        content ''
        position absolute
        top 50%
        height 20%
        width 40%
        background var(--chrome)
        left 95%

    &--right
      right -10%

  &__side-step
    position absolute
    bottom -5%
    left 28%
    width 12%
    height 10%
    background var(--plastic)
    border-radius calc(var(--trim-width) * 1px) calc(var(--trim-width) * 1px) 0 0

  &__side-window-frame
    background 'hsl(%s, 100%, 50%)' % (var(--truck-hue))
    position absolute
    height 100%
    width 60%
    left 0%
    top 0
    transform skew(-10deg)
    border-radius 10% 0 0 0 / 25% 0 0 0

    &:after
      border-radius 10% 0 0 0 / 25% 0 0 0
      content ''
      position absolute
      top 10%
      left 10%
      height 80%
      width 45%
      background var(--glass)

    &:before
      content ''
      position absolute
      top 10%
      width 25%
      background 'hsl(%s, 0%, %s)' % (var(--truck-hue) calc(var(--plastic-lightness) * 1%))
      height 80%
      left 50%


  &__engine-block-wrapper
    position absolute
    height calc(var(--size) * 0.075px)
    width calc(var(--size) * 0.18px)
    right calc(var(--size) * .2px)
    top calc(var(--size) * .3525px)
    transform translate(0, calc(var(--engine-rise, 100) * 1%))
    z-index 3

  &__engine-block
    height 100%
    width 100%
    animation rumble .1s infinite ease

    @keyframes rumble
      0%, 100%
        transform translate(0, 0)
      50%
        transform translate(0, 5%)

    &:before
      content ''
      position absolute
      top 70%
      left 25%
      background linear-gradient(90deg, var(--grill) 0, var(--grill) 20%, var(--chrome) 20%, var(--chrome))
      width 50%
      height 30%

    &-head
      position absolute
      top 0
      width 100%
      left 0
      height 80%
      background var(--grill)
      border-radius 25% 25% 25% 25% / 50% 50% 50% 50%
      overflow hidden

    &-hole
      position absolute
      background var(--plastic)
      border-radius 100%
      top 20%
      height 60%
      width 20%
      left 55%

    &-front
      position absolute
      border-radius 25% 25% 25% 25% / 50% 50% 50% 50%
      top 0
      width 100%
      background var(--chrome)
      height 100%
      left 20%

      &:after
      &:before
        content ''
        position absolute
        background var(--plastic)
        height 60%
        top 20%
        width 20%
        border-radius 100%
      &:before
        left 5%
      &:after
        left 30%


  &__side-body
    --wheel-arch-rear-height 40
    --wheel-arch-front-height 55
    --wheel-arch-width 18
    --wheel-arch-rear-left 6
    --wheel-arch-front-left 45
    border-radius 2% 0 0 0 / 10% 0 0 0
    background 'hsl(%s, 100%, 50%)' % (var(--truck-hue))
    height calc(var(--size) * 0.14px)
    position absolute
    left calc(var(--size) * 0.05px)
    width calc(var(--size) * 0.9px)
    top calc(var(--size) * 0.425px)
    z-index 4
    // $clip = polygon(-10% 110%, calc(var(--trim-width) * 1px + 5%) 110%, calc(var(--trim-width) * 1px + 6%) 50%, 50% 50%, 110% 110%, 110% -10%, -10% -10%)
    --trim-offset calc(var(--trim-width) * 1px)
    --rear-wheel-left calc((var(--trim-offset)) + (var(--wheel-arch-rear-left) * 1%))
    --rear-wheel-top calc((var(--trim-offset)) + (100 - var(--wheel-arch-rear-height)) * 1%)
    --rear-wheel-right calc(var(--rear-wheel-left) + ((var(--wheel-arch-width) * 1%) - var(--trim-offset) * 2))
    --front-wheel-left calc((var(--trim-offset)) + (var(--wheel-arch-front-left) * 1%))
    --front-wheel-top calc((var(--trim-offset)) + (100 - var(--wheel-arch-front-height)) * 1%)
    --front-wheel-right calc(var(--front-wheel-left) + ((var(--wheel-arch-width) * 1%) - var(--trim-offset) * 2))
    --clip polygon(-10% 110%, var(--rear-wheel-left) 110%, var(--rear-wheel-left) var(--rear-wheel-top), var(--rear-wheel-right) var(--rear-wheel-top), var(--rear-wheel-right) 110%, var(--front-wheel-left) 110%, var(--front-wheel-left) var(--front-wheel-top), var(--front-wheel-right) var(--front-wheel-top), var(--front-wheel-right) 110%, 110% 110%, 110% -10%, -10% -10%)
    -webkit-clip-path var(--clip)
    clip-path var(--clip)

    &:after
      // door handle
      content ''
      position absolute
      top 15%
      left 30%
      background var(--chrome)
      height 5%
      width 5%
      border-radius calc(var(--trim-width) * 1px)

  &__rear-bumper
    border-radius calc(var(--trim-width) * 1px)
    position absolute
    top 70%
    height 35%
    left 0%
    background var(--chrome)
    width 5%
    transform translate(-50%, 0)

  &__tail-light
    position absolute
    border-radius 0 25% 25% 0 / 0 20% 20% 0
    --grey var(--chrome)
    border calc(var(--trim-width) * 1px) solid var(--grey)
    border-left 0
    top 16%
    height calc(var(--size) * 0.046px)
    width calc(var(--size) * 0.023px)
    background 'hsl(%s, 100%, 50%)' % (var(--tail-light-hue))
    left 0%

  &__wheel-arch
    background var(--chrome)
    border-bottom 0
    height calc(var(--wheel-arch-height) * 1%)
    width calc(var(--wheel-arch-width) * 1%)
    position absolute
    bottom 0
    left calc(var(--wheel-arch-left) * 1%)

    &--back
      --wheel-arch-height var(--wheel-arch-rear-height)
      --wheel-arch-left var(--wheel-arch-rear-left)
    &--front
      --wheel-arch-height var(--wheel-arch-front-height)
      --wheel-arch-left var(--wheel-arch-front-left)

  &__light-bar
    height calc(var(--size) * 0.0075px)
    width calc(var(--size) * 0.18px)
    background var(--grill)
    position absolute
    top calc(var(--size) * .3px)
    left calc(var(--size) * .45px)
    border-radius calc(var(--trim-width) * 1px) calc(var(--trim-width) * 1px) 0 0
    transform translate(0, 500%) translate(0, calc(var(--light-bar-scale, 0) * -500%))

    &-light
      height 350%
      width 80%
      background white
      position absolute
      top 50%
      transform-origin center
      left 50%
      border calc(var(--trim-width) * 1px) solid var(--grill)
      border-radius calc(var(--trim-width) * 1px)
      transform translate(-50%, -50%)

    &:after
    &:before
      content ''
      background var(--grill)
      position absolute
      top 50%
      width 5%
      height 250%

    &:before
      left 0
    &:after
      right 0

  &__bars
    position absolute
    width calc(var(--size) * 0.2px)
    height calc(var(--size) * 0.12px)
    top calc(var(--size) * 0.325px)
    left calc(var(--size) * .1px)

  &__bar
    position absolute
    background var(--grill)
    width 10%
    height 100%
    border-radius 50% / 10%
    transform-origin bottom center

    &--vertical
      left 75%
      top 0
      transform rotate(10deg) scaleY(1)

    &--horizontal
      height 140%
      left 0%
      top 0
      transform rotate(48deg) translate(0, -40%) scaleY(1)

  &__wheel
    border-radius 50% 35% 35% 50% / 50% 50% 50% 50%
    background #111
    position absolute
    transform-style preserve-3d
    transform-origin bottom center
    transform scale(var(--wheel-scale, 1))
    height 100%
    width 100%

    &-face
      height 100%
      width calc(var(--wheel-height) * 1px)
      background var(--plastic)
      border-radius 100%
      position absolute
      left 0
      top 0

    &-hub
      --hub-size calc(var(--size) * .07px)
      box-shadow calc(var(--size) * 0.018px) 0 0 0 var(--grill) inset
      border calc(var(--trim-width) * 1px) solid var(--chrome)
      background var(--plastic)
      height var(--hub-size)
      width var(--hub-size)
      border-radius 100%
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      overflow hidden

    &-alloy
      position absolute
      height 100%
      width 100%
      position absolute
      top 0
      left 15%
      animation spin .5s infinite linear
      border-radius 100%
      overflow hidden

      @keyframes spin
        to
          transform rotate(360deg)

    &-spoke
      height 50%
      width 25%
      position absolute
      top 50%
      left 50%
      background var(--chrome)
      transform-origin top center
      transform translate(-50%, 0) rotate(calc(360 / 5 * var(--s) * 1deg))


  &__wheel-container
    height calc(var(--wheel-height) * 1px)
    width calc(var(--wheel-width) * 1px)
    position absolute
    left 12.5%
    bottom 0

    &--nsf
      left 47.5%
      z-index calc(var(--elevated, 0) * 2)


    &--osf
    &--osr
      left 44%
      filter brightness(0.25)
      --plastic #000
      transform translate3d(0, 0, -1px)
      .truck__coilover
        transform translate3d(-50%, 0, 0)
        z-index 2

    &--osf
      left 79%

  &__coilover
    width 10%
    height 100%
    position absolute
    bottom 50%
    left 50%
    transform translate3d(-50%, 0, -1px)
    background var(--grill)

    &:after
      // coils
      content ''
      background repeating-linear-gradient(20deg, transparent, transparent 6%, var(--coilover) 6%, var(--coilover) 11%, transparent 11%)
      width 150%
      height 100%
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)

  &__chassis
    background rgba(0, 0, 0, 0.5)
    width 100%
    position absolute
    bottom 0

  &__underbody
    --multiplier .05
    background #000
    width 80%
    left 50%
    position absolute
    height calc(var(--size) * 0.1px)
    bottom calc(var(--size) * var(--multiplier, 1) * 1px)
    transform translate3d(-50%, 0, -1px)

  &__chassis-beam
    position absolute
    bottom 50%
    background var(--chassis)
    // filter brightness(0.25)
    // z-index 999

    &--vertical
      position absolute
      width 5%
      height calc(var(--wheel-height) * 0.5px)
      bottom 0
      transform scale(calc(var(--elevated) + 1))
      transform-origin bottom center

    &--vertical-left
      left 35%
    &--vertical-right
      left 65%

    &--horizontal
      // filter brightness(0.1)
      transform translate3d(0, 50%, -1px)
      width calc(var(--wheel-width) * 2.4px)
      height calc(var(--wheel-height) * .15px)
      bottom calc(var(--wheel-width) * ((var(--elevated, 0) + 1) / 2) * 1px)
      transform translate3d(0, 100%, -1px) scaleY(calc(var(--elevated, 0) + 1))
      filter brightness(var(--elevated, 0))

    &--horizontal-left
      left calc(12.5% + (var(--wheel-width) * 0.5px))

    &--horizontal-right
      left calc(47.5% + (var(--wheel-width) * 0.5px))


View Compiled
// 404
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.