CSS Shapes

Patterns _.backgroundColor = color(); _.borderRadius = rand( '100% 0 0 0', '0 100% 0 0', '0 0 100% 0', '0 0 0 100%' ); _.backgroundColor = color(); _.clipPath = _.webkitClipPath = `polygon(${ rand( '0 0, 100% 0, 100% 100%', '0 0, 100% 0, 0 100%', '0 0, 100% 100%, 0 100%', '100% 0, 100% 100%, 0 100%' )})`; _.backgroundColor = color(); _.clipPath = _.webkitClipPath = `polygon(${ rand( '0 0, 50% 0, 100% 100%, 0% 50%', '50% 0, 100% 0, 100% 50%, 0 100%', '0 0, 100% 50%, 100% 100%, 50% 100%', '0 50%, 100% 0, 50% 100%, 0 100%' )})`; _.backgroundColor = color(rangeOf(.2, .9, .1)); _.borderRadius = '50%'; _.width = _.height = rangeOf(25, 125, 25) + '%'; _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`; _.backgroundColor = color(rangeOf(.2, .9, .1)); _.borderRadius = rand('100% 0', '0 100%'); _.width = _.height = rangeOf(25, 125, 25) + '%'; _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`; _.backgroundColor = color(rangeOf(.1, .9, .1)); _.width = _.height = rangeOf(25, 125, 25) + '%'; _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`; _.backgroundColor = color(rangeOf(.1, .9, .1)); _.clipPath = _.webkitClipPath = `polygon( ${ rangeOf(0, 100) + '%'} 0, 100% ${rangeOf(0, 100) + '%'}, 0 ${rangeOf(0, 100) + '%'} )`; _.transform = `rotate(${ rangeOf(0, 360) + 'deg'})`; _.backgroundColor = color(rangeOf(.1, .9, .1)); _.height = rangeOf(1, 5) + 'px'; _.transform = ` scale(${ rand(2, 2.5, 3, 3.5) }) rotate(${ rangeOf(25, 100, 25) + 'deg' }) `; _.border = `${ rangeOf(2, 10) + 'px' } solid ${ color(rangeOf(.1, .9, .1)) }`; _.width = _.height = rangeOf(25, 200, 25) + '%'; _.transform = 'rotate(45deg)'; _.border = `${ rangeOf(2, 5) + 'px' } solid ${ color(rangeOf(.2, .9, .1)) }`; _.borderRadius = '50%'; _.transform = `scale(${ rangeOf(5, 18) })`; _.borderRadius = '50%'; _.borderTop = `${ rangeOf(1, 10) + 'px' } solid ${ color(rangeOf(.5, .9, .1)) }`; _.width = _.height = rangeOf(25, 200) + '%'; _.transform = ` scale(${ rand(1, 1.5, 1.8, 2) }) rotate(${ rangeOf(25, 360) + 'deg' }) `; _.border = `0 solid ${ color(rangeOf(.5, .9, .1)) }`; _.borderRadius = '100%'; _.borderTopWidth = _.borderLeftWidth = '.4em'; _.transform = `skewX(${-1 * rangeOf(30, 40) + 'deg'})`; let c = color(rangeOf(.5, .9, .1)) _.borderRadius = '50%'; _.backgroundColor = '#fafafa'; _.transition = 'transform .3s ease'; _.transform = `scale(${ rangeOf(2, 3, .1) })`; _.backgroundImage = ` repeating-radial-gradient( circle closest-side, ${ c }, ${ c } 2px, #fafafa 2px, #fafafa 6px ) `; let c = color(rangeOf(.5, .9, .1)); _.boxShadow = ` inset 0 0 0 1px ${ c }, inset ${ rand(-2, 2) + 'px' } ${ rand(-2, 2) + 'px' } 1px ${ rangeOf(5) + 'px' } ${ c } `; _.width = rangeOf(50, 100) + '%'; _.height = rangeOf(50, 100) + '%'; _.borderRadius = ` ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } / ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } ${ rangeOf(50, 100) + '%' } `; _.left = '50%'; _.top = '50%'; _.transform = 'translate(-50%, -50%)'; _.boxSizing = 'border-box'; _.border = `${ rangeOf(8)+ 'px' } solid ${ color(rangeOf(.2, .8, .1)) }`; _.width = '50%'; _.height = '120%'; _.borderRadius = '50%'; _.transform = ` scaleX(${ rangeOf(5, 12) }) rotate(${ rand(45, 60, 90) + 'deg' }) `; let c = color(rangeOf(.5, .9, .1)); _.boxShadow = ` inset 0 0 0 1px ${ c }, inset 2px 2px 4px 0 ${ c } `; _.left = '25%'; _.top = '-42%'; _.width = '50%'; _.height = '192%'; _.borderRadius = '100% / 28%'; _.willChange = 'transform'; _.transform = ` rotate(${ setvar('direction', rand(45, -45)) + 'deg' }) `; let c = color(rangeOf(.1, .9, .1)); _.boxShadow = ` inset 0 0 0 1px ${ c }, inset ${ rangeOf(4) + 'px'} ${ rangeOf(4) + 'px'} 4px 0 ${ c } `; _.top = '-50%'; _.left = '-15%'; _.width = '90%'; _.height = '200%'; _.borderRadius = '100% / 80%'; _.transform = ` scale(${ setvar('scale', rangeOf(.9, 1.15, .05)) }) rotate(${ ((index % 2 ) ? 1 : -1) * 45 + 'deg' }) `; let c = _.backgroundColor = color(rangeOf(.2, .9, .1)); _.transitionDelay = setvar('delay' + (index % 5), rangeOf(600) + 'ms'); _.boxShadow = ` inset 0 0 0 1px ${ c }, inset 2px 2px 4px 0 ${ c } `; _.left = '25%'; _.width = '50%'; _.height = '156%'; _.borderRadius = '100% / 40%'; _.transform = ` translateY(${ setvar('offset' + (index % 5), rangeOf(-10, 10)) + 'px' }) rotate(${ ((index % 2 ) ? -1 : 1) * setvar('deg', rangeOf(15, 30)) + 'deg' }) `; let c = _.backgroundColor = color(rangeOf(.2, .9, .1)); let group = index % 2 ? (index - 1) : index; _.transitionDelay = setvar('delay' + group, rangeOf(600) + 'ms'); _.boxShadow = ` inset 0 0 0 1px ${ c }, inset 2px 2px 4px 0 ${ c } `; _.left = '50%'; _.top = setvar('top' + group, rangeOf(-5, 5) + 'px'); _.width = '50%'; _.borderRadius = '100% / 90%'; _.transform = ` translate(${ ((index % 2 ) ? -1 : 1) * 60 + '%' }) rotate(${ ((index % 2 ) ? 1 : -1) * setvar('deg' + group, rangeOf(20, 50)) + 'deg' }) `; if (index % 2) { _.marginLeft = '.5em'; _.borderRadius = '0 20% 80% 20%'; _.backgroundColor = color(rangeOf(.2, .9, .1)); _.boxShadow = `-1em 6em 0 0 ${ color(rangeOf(.2, .8, .1)) }`; _.transform = ` rotateY(65deg) rotate(45deg) scale(${ rangeOf(.6, 1, .1) }) translate( ${ rand(0, -5, 5) + 'px'}, ${ rand(0, -5, 5) + 'px'} ) `; } let c = color(rangeOf(.2, .9, .1)) _.backgroundRepeat = 'no-repeat'; _.backgroundSize = ` ${ rangeOf(30, 100) + '%' }, ${ rangeOf(30, 100) + '%' } `; _.backgroundImage = ` linear-gradient(-45deg, ${ c } 50%, transparent 50%), linear-gradient(-45deg, ${ c } 50%, transparent 50%) `; _.backgroundPosition = index % 2 ? '0 0, 100% 100%' : '100% 0, 0 100%'; _.width = '105%'; _.backgroundColor = color(rangeOf(.2, .9, .1)); _.clipPath = _.webkitClipPath = `polygon( 0 0, 100% 0, ${ rangeOf(100) + '%' } ${ rangeOf(10, 90) + '%' } )` switch (index % 5) { case 0: _.transformOrigin = '0 0'; _.transform = 'translateY(0) rotate(15deg)'; break; case 1: _.transformOrigin = '0 0'; _.transform = 'translateY(26.795%) rotate(10deg)'; break; case 2: _.transform = 'translateY(45%)'; break; case 3: _.transformOrigin = '100% 0'; _.transform = 'translateY(26.795%) rotate(-10deg)'; break; case 4: _.transformOrigin = '100% 0'; _.transform = 'translateY(0) rotate(-16deg)'; break; } if (index % 2) { let c = color(rangeOf(.2, .9, .1)) let size = rangeOf(30, 70); _.transform =` rotate(${ (index % 5 ) * 8 + 45 + 'deg' }) scale(1.1) `; _.backgroundRepeat = 'no-repeat'; _.backgroundImage = ` linear-gradient(${ c }, ${ c }), linear-gradient(${ c }, ${ c }), linear-gradient(${ c }, ${ c }), linear-gradient(${ c }, ${ c }) `; _.backgroundSize = ` ${ size - 8 + '%' } ${ size - 8 + '%' }, ${ (100 - size - 8) + '%' } ${ size - 8 + '%' }, ${ (100 - size - 8) + '%' } ${ (100 - size - 8) + '%' }, ${ size - 8+ '%' } ${ (100 - size - 8) + '%' } `; _.backgroundPosition = ` 0 0, 100% 0, 100% 100%, 0 100% `; }

Sorry! It seems that your browser does not support Web Components!