- 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++*
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%
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)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.