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!
