- for(var n = 0;n < 100;n++)
div(data-number=n+1)
$T: transparent;
$b: #000000;
$w: #ffffff;
$lw: #aaaaaa ;
$lb: #AAE0FA;
$bl: #01ABCE;
$lg: #D8DF20;
$g: #71BF45;
$dg: #00A65E;
$y: #FFCA08;
$o: #F7941D;
$do: #F25822;
$p: #ED008C;
$r: #D41E4E;
$lv: #AC54A0;
$v: #5C2E91;
$br: #8f4426;
*{
box-sizing: border-box;
margin:0;
font-family: sans-serif;
font-weight: 700;
}
body{
max-width: 100vw;
display: grid;
grid-template-columns: repeat( auto-fit, minmax(12em, 1fr) );
grid-column-gap: 0.25em;
grid-row-gap: 0.25em;
}
div{
position: relative;
padding-top: 100%;
}
div::after{
//content: attr(data-number);
position: absolute;
top:0;
left:0;
background: white;
padding: 2px 6px;
}
div:nth-of-type(1){
background: repeating-linear-gradient(135deg, $lv 0 2px, $T 2px 4px) 0 0 / 20px 20px
}
div:nth-of-type(2){
background:
repeating-radial-gradient(at 50% 100%,
$T 0 20%, $r 20% 25%, $T 25% 30%
) 0 0 /30px 20px
}
div:nth-of-type(3){
background:
radial-gradient(circle, rgba($w, 0.1), $T 50%) 5px 0/20px 20px,
radial-gradient(circle, rgba($w, 0.1), $T 40%) 15px 10px/20px 20px,
radial-gradient($y 6%, $T 8%) 0 0/ 20px 20px,
radial-gradient($y 6%, $T 8%) 10px 10px/ 20px 20px,
linear-gradient(45deg, $T 48%, $b 49% 51%, $T 52%)0 0/ 20px 20px,
linear-gradient(-45deg, $T 48%, $b 49% 51%, $T 52%)0 0/ 20px 20px;
background-color: lighten($b, 15%);
}
div:nth-of-type(4){
background: radial-gradient($lv 25%, $T 26%) 0 0 /40px 40px,
radial-gradient($lv 16%, $T 17%) 20px 20px /40px 40px
}
div:nth-of-type(5){
background: lighten($y, 25%);
background-size: 2em 2em;
background-image: linear-gradient(
45deg,
transparent 44%,
darken($y, 10%) 44% 50%,
lighten($y, 36%) 52% 56%,
transparent 56%
),
linear-gradient(
-45deg,
transparent 44%,
darken($y, 10%) 44% 50%,
lighten($y, 36%) 52% 56%,
transparent 56%
)
}
div:nth-of-type(6){
background:
linear-gradient(135deg, $do 25%,$T 25%) -10px 0/ 20px 20px,
linear-gradient(225deg, $o 25%,$T 25%) -10px 0/ 20px 20px,
linear-gradient(315deg, $do 25%,$T 25%) 0px 0/ 20px 20px,
linear-gradient(45deg, $o 25%,$T 25%) 0px 0/ 20px 20px;
}
div:nth-of-type(7){
background:
repeating-radial-gradient(at 50% 0%,
$T 0 20%, $v 20% 30%, $T 30% 40%
) 0 0 /30px 20px,
repeating-radial-gradient(at 50% 100%,
$T 0 20%, $v 20% 30%, $T 30% 40%
) 0 0 /30px 20px
}
div:nth-of-type(8){
background:
linear-gradient(45deg,$T 0 23px, $r 23px 24px, $T 24px) 0 0 /20px 20px,
linear-gradient(-45deg,$T 0 23px, $r 23px 24px, $T 24px) -10px 10px /20px 20px
}
div:nth-of-type(9){
background:
repeating-radial-gradient(
$lg 0 10%, $g 10% 20%
) 0 0 /40px 40px
}
div:nth-of-type(10){
background: radial-gradient(farthest-side, $y 35%, $lw 36% 40%, $T 42%),
radial-gradient(farthest-side, $y 35%, $lw 36% 40%,$T 42%) 8px 40px;
background-size: 16px 80px;
}
div:nth-of-type(11){
background: repeating-linear-gradient(135deg,$bl 0 2px, $T 2px 4px, $bl 4px 8px, $T 8px 10px, $bl 10px 12px, $T 12px 20px)
}
div:nth-of-type(12){
background: linear-gradient(135deg,$T 15px, $b 15px 16px, $T 16px 18px, $b 18px 19px, $T 19px 21px, $b 21px 22px, $T 22px 24px, $b 24px 25px, $T 25px),
linear-gradient(-135deg,$T 15px, $b 15px 16px, $T 16px 18px, $b 18px 19px, $T 19px 21px, $b 21px 22px, $T 22px 24px, $b 24px 25px, $T 25px);
background-size: 30px 30px;
background-color: $bl;
}
div:nth-of-type(13){
background:
linear-gradient($w 6px, $T 6px),
linear-gradient(to right, $w 6px, $T 6px),
linear-gradient($bl 0 1px, $T 1px 78px)0 6px / 100% 78px,
linear-gradient(to right,$bl 0 1px, $T 1px 78px)6px 0 / 78px 100% ,
linear-gradient(lighten($bl, 35%) 0 1px, $T 1px 6px)0 0 / 100% 6px,
linear-gradient(to right, lighten($bl, 35%) 0 1px, $T 1px 6px)0 0 / 6px 100%;
}
div:nth-of-type(14){
background:
linear-gradient(to right, $T 29px, $p 30px, $T 31px),
linear-gradient($T 19px, $bl 20px 21px, $T 21px),
repeating-linear-gradient(lighten($bl, 35%) 0 1px, $T 1px 10px)no-repeat 0 20px;
}
div:nth-of-type(15){
background:
radial-gradient($bl 5%, $T 9%) 0 0 / 20px 20px
}
div:nth-of-type(16){
background: linear-gradient(45deg, $T 49.4%, $bl 49.5% 50.5%, $T 50.6%),
linear-gradient(-45deg, $T 49.4%, $bl 49.5% 50.5%, $T 50.6%),
linear-gradient($T 19.2px,$bl 19.2px 19.8px, $T 19.8px),
linear-gradient(to right,$T 19.2px,$bl 19.2px 19.8px, $T 19.8px);
background-size: 40px 40px;
}
div:nth-of-type(17){
background: radial-gradient(circle at 25% 100%, $T 24%, $bl 25% 29%, $T 30%) 0 0/ 40px 20px,
radial-gradient(circle at 25% 0%, $T 24%, $bl 25% 29%, $T 30%) 20px 20px/ 40px 20px;
}
div:nth-of-type(18){
background:
repeating-radial-gradient(at 50% 0%,
$T 0 30%, $do 20% 30%, $T 30% 40%
) 15px 0 /30px 20px,
repeating-radial-gradient(at 50% 100%,
$T 0 30%, $do 30% 40%, $T 40% 55%
) 0 0 /30px 20px;
}
div:nth-of-type(19){
background:
linear-gradient(315deg, $w 25%, $T 25% 75%, $w 75%)0 0/ 20px 20px,
linear-gradient(45deg, $T 25%, $bl 25% 75%, $T 75%)0 0/ 20px 20px;
}
div:nth-of-type(20){
background: linear-gradient(155deg, $do 25%, $T 25%)0 0 / 15px 15px,
linear-gradient(335deg, $do 25%, $T 25%)2px 0 / 15px 15px;
}
div:nth-of-type(21){
background:
linear-gradient(45deg,$T 0 9px, $y 9.5px 10px, $T 10px 20px) 0 0 /10px 10px,
linear-gradient(-45deg,$T 0 9px, $y 9.5px 10px, $T 10px 20px) -6px 0px /10px 10px;
}
div:nth-of-type(22){
background:
repeating-linear-gradient(35deg, $T 0 4px, $bl 4px 5px)no-repeat 0 0 / 50% 100%,
repeating-linear-gradient(-35deg, $T 0 4px, $bl 4px 5px)no-repeat 100% 0 / 50% 100%;
}
div:nth-of-type(23){
background: repeating-linear-gradient(to right, $g 0 2px, $T 2px 6px, $lg 6px 8px, $T 8px 20px),
repeating-linear-gradient($g 0 2px, $T 2px 6px, $lg 6px 8px, $T 8px 20px);
}
div:nth-of-type(24){
background:
radial-gradient(circle at 100% 50%, $bl 35%, $T 25%)10px 10px/ 20px 40px,
radial-gradient(circle at 0% 50%, $bl 35%, $T 25%)10px 10px/ 20px 40px,
radial-gradient(circle at 50% 100%, $bl 35%, $T 25%)0 0/ 40px 20px,
radial-gradient(circle at 50% 0%, $bl 35%, $T 25%)0 0/ 40px 20px,
linear-gradient(to right, $w 25%, $T 25% 75%, $w 75%) 0 0 /40px 40px,
linear-gradient($T 25%, $bl 25% 75%, $T 75%) 0 10px /40px 40px
}
div:nth-of-type(25){
background:
repeating-linear-gradient($T 0 20px, darken($bl, 20%) 20px 21px, $bl 21px 22px, $T 23px 24px,darken($bl, 20%) 24px 25px, $bl 25px 26px, $T 27px 28px, darken($bl, 20%)28px 29px,$bl 29px 30px, $T 31px 32px, darken($bl, 20%) 32px 33px, $bl 33px 34px, $T 35px 36px, darken($bl, 20%)36px 37px, $bl 37px 38px, $T 39px 40px, darken($bl, 20%)40px 41px, $bl 41px 42px, $T 43px 44px),
repeating-linear-gradient(to right, darken($bl, 20%) 0 1px, $bl 1px 2px, $T 3px 4px);
}
div:nth-of-type(26){
background:
linear-gradient(to right,rgba($b, 0.2), rgba($b, 0.05) 50%)0 0/ 10px 100%;
background-color: $bl;
}
div:nth-of-type(27){
background:
radial-gradient(circle at center,$T 67%, $bl 68% 72%, $T 73%)0 0/ 40px 40px,
radial-gradient(circle at center,$T 67%, $bl 68% 72%, $T 73%)20px 20px/ 40px 40px;
}
div:nth-of-type(28){
background:
repeating-linear-gradient(-45deg,$T 0 20px, darken($bl, 20%) 20px 21px, $bl 21px 22px, $T 23px 24px,darken($bl, 20%) 24px 25px, $bl 25px 26px, $T 27px 28px, darken($bl, 20%)28px 29px,$bl 29px 30px, $T 31px 32px, darken($bl, 20%) 32px 33px, $bl 33px 34px, $T 35px 36px, darken($bl, 20%)36px 37px, $bl 37px 38px, $T 39px 40px, darken($bl, 20%)40px 41px, $bl 41px 42px, $T 43px 44px),
repeating-linear-gradient(to right, darken($bl, 20%) 0 1px, $bl 1px 2px, $T 3px 4px);
}
div:nth-of-type(29){
background: linear-gradient(135deg, $bl 20%, $w 21% 30%, $bl 30% 33%, $w 33% 40%, $bl 40% 45%, $T 45%)0 0 /40px 40px,
linear-gradient(225deg, $bl 20%, $w 21% 30%, $bl 30% 33%, $w 33% 40%, $bl 40% 45%, $w 45%)0 0 /40px 40px
}
div:nth-of-type(30){
background: radial-gradient($w 20%, $T 20%) 0 0 /12px 12px,
linear-gradient($o, $do)
}
div:nth-of-type(31){
background: linear-gradient(135deg, $do 25%,$T 25%) 0px 8px/ 36px 20px,
linear-gradient(225deg, $do 25%,$T 25%) 0px 0/ 36px 20px;
}
div:nth-of-type(32){
background:
linear-gradient(135deg, $w 25%,$T 25%) -10px 0/ 20px 20px,
linear-gradient(225deg, $w 25%,$T 25%) -10px 0/ 20px 20px,
linear-gradient(315deg, $w 25%,$T 25%) 0px 0/ 20px 20px,
linear-gradient(45deg, $w 25%,$T 25%) 0px 0/ 20px 20px;
background-color: $y;
}
div:nth-of-type(33){
background: repeating-linear-gradient(155deg, $v 0 40%, $T 40% 100%) 0 0 / 20px 20px,
repeating-linear-gradient(335deg, $v 0 40%, $T 40% 100%) 20px 20px / 20px 20px;
}
div:nth-of-type(34){
background: linear-gradient(135deg, $dg 20%, $w 21% 30%, $dg 31% 33%, $w 34% 40%, $dg 41% 45%, $T 46%)0 0 /40px 40px,
linear-gradient(255deg, $dg 20%, $w 21% 30%, $dg 31% 33%, $w 34% 40%, $dg 41% 45%, $w 46%)0 0 /40px 40px
}
div:nth-of-type(35){
background: radial-gradient(farthest-side, $y 25%, $lw 26% 50%,$o 51% 65%, $T 66%),
radial-gradient(farthest-side, $y 25%, $lw 26% 50%,$o 51% 65%, $T 66%) 20px 40px;
background-size: 40px 80px;
background-color: lighten($y, 40%);
}
div:nth-of-type(36){
background:
radial-gradient(circle at 50% 80%,$T 10%,$bl 10% 15%, $T 15% 30%, $bl 30% 35%, $w 35% 60%, $bl 60% 65%, $T 65%)20px 19px/ 40px 40px,
radial-gradient(circle at 50% 80%,$T 10%,$bl 10% 15%, $T 15% 30%, $bl 30% 35%, $T 35% 60%, $bl 60% 65%, $T 65%)0 0/ 40px 40px;
}
div:nth-of-type(37){
background:
linear-gradient($r 6px, $T 6px),
linear-gradient(to right,$r 6px, $T 6px),
linear-gradient($o 12px, $T 12px 54px, $o 54px ),
linear-gradient(to right,$o 12px, $T 12px 54px, $o 54px ),
linear-gradient($p 18px, $T 12px 48px, $p 48px ),
linear-gradient(to right,$p 18px, $T 18px 48px, $p 48px ),
linear-gradient($y 24px, $T 12px 42px, $y 42px ),
linear-gradient(to right,$y 24px, $T 12px 42px, $y 42px );
background-size: 60px 60px;
background-color: $lv;
}
div:nth-of-type(38){
background: linear-gradient(155deg, $bl 25%, $T 25%)0 0 / 10px 10px,
linear-gradient(335deg, $bl 25%, $T 25%)0 5px / 10px 10px;
}
div:nth-of-type(39){
background:
linear-gradient(335deg, darken($r, 3%) 32%, $T 33%)11.8px 24px,
linear-gradient(155deg, $r 32%, $T 33%)12.5px -11.8px,
linear-gradient(335deg, darken($r, 3%) 32%, $T 33%)0 12px,
linear-gradient(155deg, $r 32%, $T 33%) ;
background-size: 25px 25px;
}
div:nth-of-type(40){
background: repeating-linear-gradient(45deg, $br 0 10px, $y 10px, 20px, $o 20px 30px, $do 20px 40px, $r 40px 50px);
}
div:nth-of-type(41){
background: linear-gradient(135deg,$T 15px, $dg 15px 16px, $T 16px 18px, $dg 18px 19px, $T 19px 21px, $dg 21px 22px, $T 22px 24px, $dg 24px 25px, $T 25px),
linear-gradient(-135deg,$T 15px, $dg 15px 16px, $T 16px 18px, $dg 18px 19px, $T 19px 21px, $dg 21px 22px, $T 22px 24px, $dg 24px 25px, $T 25px),
linear-gradient(135deg,$T 15px, $dg 15px 16px, $T 16px 18px, $dg 18px 19px, $T 19px 21px, $dg 21px 22px, $T 22px 24px, $dg 24px 25px, $T 25px) 20px 20px,
linear-gradient(-135deg,$T 15px, $dg 15px 16px, $T 16px 18px, $dg 18px 19px, $T 19px 21px, $dg 21px 22px, $T 22px 24px, $dg 24px 25px, $T 25px) 20px 20px;
background-size: 40px 40px;
background-color: $g;
}
div:nth-of-type(42){
background:
repeating-linear-gradient(-45deg,$T 0 20px, darken($bl, 20%) 20px 21px, $bl 21px 22px, $T 23px 24px,darken($bl, 20%) 24px 25px, $bl 25px 26px, $T 27px 28px, darken($bl, 20%)28px 29px,$bl 29px 30px, $T 31px 32px, darken($bl, 20%) 32px 33px, $bl 33px 34px, $T 35px 36px, darken($bl, 20%)36px 37px, $bl 37px 38px, $T 39px 40px, darken($bl, 20%)40px 41px, $bl 41px 42px, $T 43px 44px),
repeating-linear-gradient(45deg, darken($bl, 20%) 0 1px, $bl 1px 2px, $T 3px 4px);
}
div:nth-of-type(43){
background: linear-gradient(45deg, $T 24.4%, $bl 24.5% 25.5%, $T 25.6% 74.4%, $bl 74.5% 75.5%, $T 75.6%),
linear-gradient(-45deg, $T 49.4%, $bl 49.5% 50.5%, $T 50.6%),
linear-gradient($T 19.2px,$bl 19.2px 19.8px, $T 19.8px),
linear-gradient(to right,$T 19.2px,$bl 19.2px 19.8px, $T 19.8px);
background-size: 40px 40px;
}
div:nth-of-type(44){
background: radial-gradient(circle at 50% 100%, $T 20%, $bl 20% 25%, $T 25% 40%, $bl 40% 50%,$T 50% )0 0 / 20px 20px,
radial-gradient(circle at 50% 100%, $T 20%, $bl 20% 25%, $T 25% 40%, $bl 40% 50%,$T 50% )10px 10px / 20px 20px;
}
div:nth-of-type(45){
background: radial-gradient(circle at 50% 100%, $T 20%, $bl 20% 25%, $T 25% 40%, $bl 40% 50%,$T 50% )0 0 / 20px 20px,
radial-gradient(circle at 50% 0, $T 20%, $bl 20% 25%, $T 25% 40%, $bl 40% 50%,$T 50% )10px 10px / 20px 20px;
}
div:nth-of-type(46){
background:
linear-gradient(-135deg,$bl 25%,transparent 25%) 40px 40px /80px 80px,
linear-gradient(-45deg, $g 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(135deg, $lg 25%, transparent 25% ) 40px 40px /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(-135deg,
$bl 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(-45deg, $g 25%, $T 25%)0 0 /80px 80px,
linear-gradient(135deg,
$lg 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)0 0 /80px 80px;
}
div:nth-of-type(47){
background: linear-gradient(-135deg,$y 25%,transparent 25%) 40px 40px /80px 80px,
linear-gradient(-45deg, $g 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(135deg, $lg 25%, transparent 25% ) 40px 40px /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(-135deg,
$y 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(-45deg, $g 25%, $T 25%)0 0 /80px 80px,
linear-gradient(135deg,
$lg 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)0 0 /80px 80px;
}
div:nth-of-type(48){
background:
linear-gradient(45deg,$T 0 23px, $do 23px 24px, $T 24px) 0 0 /20px 20px,
linear-gradient(-45deg,$T 0 23px, $do 23px 24px, $T 24px) 20px 10px /20px 20px;
background-color: $o;
}
div:nth-of-type(49){
background: linear-gradient(-135deg,$g 25%,transparent 25%) 40px 40px /80px 80px,
linear-gradient(-45deg, $dg 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(135deg, $g 25%, transparent 25% ) 40px 40px /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)40px 40px /80px 80px,
linear-gradient(-135deg,
$g 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(-45deg, $dg 25%, $T 25%)0 0 /80px 80px,
linear-gradient(135deg,
$g 25%,
transparent 25%
) 0 0 /80px 80px,
linear-gradient(45deg, $dg 25%, $T 25%)0 0 /80px 80px;
}
div:nth-of-type(50){
background:
linear-gradient(
to right top,
$T 33%,
$lg 33% 66%,
$T 66%
)0 0 / 3px 3px;
}
div:nth-of-type(51){
background:
linear-gradient(45deg, $g 15%, $T 15% 85%, $g 80%)0 0 / 20px 20px,
linear-gradient(135deg, $T 33%,$dg 33% 65%, darken($lg, 10%)66% , $T 67%)0 0 / 20px 20px,
linear-gradient(45deg, $T 33%,$g 33% 66%, $T 60%)0 0 / 20px 20px;
background-color: $lg;
}
div:nth-of-type(52){
background:
radial-gradient(
$w 12%, $T 12%
)0 0 /40px 40px,
radial-gradient(
$w 12%, $T 12%
)20px 20px /40px 40px;
background-color: $p;
}
div:nth-of-type(53){
background:
radial-gradient(rgba($w, 0.05) 20%, $T) 0 0/20px 20px,
radial-gradient($y 6%, $T 8%) 0 0/ 20px 20px,
radial-gradient($y 6%, $T 8%) 10px 10px/ 20px 20px,
linear-gradient(45deg, $T 48%, $b 49% 51%, $T 52%)0 0/ 20px 20px,
linear-gradient(-45deg, $T 48%, $b 49% 51%, $T 52%)0 0/ 20px 20px;
background-color: lighten($b, 15%);
}
div:nth-of-type(54){
background:
linear-gradient(-45deg,$v, $lv) 0 0 /8px 8px
}
div:nth-of-type(55){
background:
repeating-radial-gradient(at 50% 0%,
$T 0 20%, $do 20% 30%, $T 30% 40%
) 15px 0 /30px 20px,
repeating-radial-gradient(at 50% 100%,
$T 0 30%, $do 30% 40%, $T 40% 55%
) 0 0 /30px 20px;
}
div:nth-of-type(56){
background: repeating-linear-gradient(155deg, $v 0 40%, $T 40% 100%) 0 0 / 20px 20px,
repeating-linear-gradient(335deg, $v 0 40%, $T 40% 100%) 20px 20px / 20px 20px;
}
div:nth-of-type(57){
background:
repeating-linear-gradient(45deg,$T 0 14px, $b 15px 16px, $T 16px 60px),
repeating-linear-gradient(-45deg,$T 0 14px, $b 15px 16px, $T 16px 60px),
repeating-linear-gradient(45deg,$T 0 44.5px, $lw 45px 45.5px, $T 45.5px 60px),
repeating-linear-gradient(-45deg,$T 0 44.5px, $lw 45px 45.5px, $T 45.5px 60px),
repeating-linear-gradient(45deg,$T 0 30px, rgba($b, 0.6) 30px 60px),
repeating-linear-gradient(-45deg,$T 0 30px, rgba($b, 0.6) 30px 60px);
background-color: $r;
}
div:nth-of-type(58){
background: radial-gradient(circle at 45% 45%, $lw 2%,$y 4%,$b 6% 7%, $T 8%) 0 0 /60px 60px,
radial-gradient(circle at 45% 45%, $lw 2%,$y 4%, $b 6% 7%, $T 8%) 30px 30px /60px 60px,
radial-gradient(circle at 100% 50%, rgba($b, 0.9) , $T 80%) 0 0 /60px 60px,
radial-gradient(circle at 100% 50%, rgba($b, 0.9) , $T 80%) 30px 30px /60px 60px;
background-color: lighten($b, 15%);
}
div:nth-of-type(59){
background:
linear-gradient($T 80%, $br 80%)0 0 / 40px 40px,
linear-gradient(-125deg, $T 25%, $br 25% 35%, $T 25%) 0 0 / 40px 40px,
linear-gradient(125deg, $T 25%, $br 25% 35%, $T 25%) 0 0 / 40px 40px,
linear-gradient($w 30%, $T 30% 70%, $w 70%) 0 0 /10px 4px,
linear-gradient(to right, $w 10%, $r 10% 90%, $w 90%) 0 0 /10px 4px;
}
div:nth-of-type(60){
background:
radial-gradient($lg 10%, $g 10% 20%, $T 20%)-60px -30px / 60px 60px,
radial-gradient($lg 10%, $g 10% 20%, $T 20%)-30px -60px / 60px 60px,
radial-gradient($lg 30%, $T 30%)-60px -30px / 60px 60px,
radial-gradient($lg 30%, $T 30%)-30px -60px / 60px 60px,
linear-gradient(45deg, $T 45%, $dg 46% 47%, $g 48% 52%, $dg 53% 54%, $T 55%)0 0/ 60px 60px,
linear-gradient(-45deg, $T 45%, $dg 46% 47%, $g 48% 52%, $dg 53% 54%, $T 55%)0 0/ 60px 60px;
}
div:nth-of-type(61){
background:
repeating-linear-gradient(0.25turn, transparent, rgba($b,0.3) 11vh) 1vh 1vh / 44vh 77vh,
repeating-linear-gradient(transparent, rgba($b,0.3) 11vh) no-repeat 1vh 1vh / 44vh 77vh,
repeating-linear-gradient(transparent 0 0.2vh, rgba($w,0.02) 0.4vh 1.2vh, transparent 2vh 9.5vh, rgba($w,0.02)10vh 11vh) no-repeat 1vh 1vh / 44vh 77vh,
repeating-linear-gradient(to right, rgba($w,0.02) 0vh 1vh, transparent 2vh 9vh,rgba($b,0.5) 10vh 11vh)no-repeat 1vh 1vh / 44vh 77vh,
linear-gradient(#422513, #422513) no-repeat;
}
div:nth-of-type(62){
background:
repeating-linear-gradient(135deg, rgba($b, 0.25), rgba($b, 0.2) 4px, $T 18px 19px, rgba($w, 0.08)19px 21px, $T 22px 40px ),
linear-gradient(45deg, $g 15%, $y 15% 30%, $o 30% 45%, $do 45% 60%, $p 60% 75%, $r 75% 90%, $v 90%);
}
div:nth-of-type(63){
background: radial-gradient($w 50%, $T 51%) 0 0 / 40px 40px,
radial-gradient($w 50%, $T 51%) 20px 20px / 40px 40px,
radial-gradient(circle at 50% 0, rgba($b, 0.1) 40%, $T 50% )10px 10px / 20px 20px,
radial-gradient(circle at 100% 50%, rgba($b, 0.1) 20%, $T 50% )10px 10px / 20px 20px;
background-color: $g;
}
div:nth-of-type(64){
background:
repeating-linear-gradient(135deg, rgba($b, 0.25), rgba($b, 0.2) 4px, $T 28px 40px ),
linear-gradient(45deg, $g 15%, $y 15% 30%, $o 30% 45%, $do 45% 60%, $p 60% 75%, $r 75% 90%, $v 90%)
}
div:nth-of-type(65){
background: radial-gradient($w 50%, $T 51%) 0 0 / 40px 40px,
radial-gradient($w 50%, $T 51%) 20px 20px / 40px 40px,
radial-gradient($g 50%, $T 51%) 0 20px / 40px 40px,
radial-gradient($bl 50%, $T 51%) 20px 0px / 40px 40px;
}
div:nth-of-type(66){
background:
repeating-linear-gradient($T 0 38.5px, $lw 38.5px 39.5px, $T 39.5px 44.5px, $lw 44.5px 45.5px, $T 45.5px 50.5px, $lw 50.5px 51.5px, $T 51.5px 60px ),
repeating-linear-gradient(to right, $T 0 38.5px, $lw 38.5px 39.5px, $T 39.5px 44.5px, $lw 44.5px 45.5px, $T 45.5px 50.5px, $lw 50.5px 51.5px, $T 51.5px 60px ),
repeating-linear-gradient($T 0 8.5px, $do 9px 10px,$T 10.5px 20.5px ,$do 21px 22px,$T 22.5px 60px),
repeating-linear-gradient(to right,$T 0 8.5px, $do 9px 10px,$T 10.5px 20.5px ,$do 21px 22px,$T 22.5px 60px),
repeating-linear-gradient($T 0 30px, rgba($b, 0.5) 30px 60px),
repeating-linear-gradient(to right, $T 0 30px, rgba($b, 0.5) 30px 60px);
background-color: lighten($y, 40%);
}
div:nth-of-type(67){
background: linear-gradient(155deg, $T 20%, $r 20% 50%, $T 30%) 0 -15px,
linear-gradient(155deg, $T 20%, $r 20% 50%, $T 30%) 30px 45px
;
background-size: 60px 120px;
}
div:nth-of-type(68){
background: repeating-linear-gradient(155deg, $r 10px, $do 10px 20px, $o 20px 30px, $y 30px 40px, $lg 40px 50px);
background-size: 40px 100%;
}
div:nth-of-type(69){
background:
linear-gradient(-135deg, $r 25%, $T 25% 75%, $r 75%) 20px -36px,
linear-gradient(135deg, $r 25%, $T 25% 75%, $r 75%); ;
background-size: 40px 72px;
}
div:nth-of-type(70){
background:
linear-gradient(-135deg, $o 25%, $T 25% 75%, $o 75%),
linear-gradient(135deg, $o 25%, $T 25% 75%, $o 75%);
background-size: 40px 72px;
}
div:nth-of-type(71){
background:
linear-gradient(-135deg, $p 33%, $T 33% 66%, $p 66%) 6px 0,
linear-gradient(135deg, $p 33%, $T 33% 66%, $p 66%) 6px 0;
background-size: 48px 5px;
}
div:nth-of-type(72){
background:
linear-gradient(60deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%), linear-gradient(120deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%);
background-size: 30px 54px;
background-color: $dg;
}
div:nth-of-type(73){
background:
repeating-linear-gradient(darken($bl, 20%) 0 1px, $T 1px 4px),
linear-gradient(60deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%),
linear-gradient(120deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%);
background-size: 30px 54px;
}
div:nth-of-type(74){
background:
linear-gradient(-135deg, $r 12%, $T 12% 88%, $r 88%),
linear-gradient(135deg, $r 12%, $T 12% 88%, $r 88%),
linear-gradient(-135deg, $o 33%, $T 33% 66%, $o 66%),
linear-gradient(135deg, $o 33%, $T 33% 66%, $o 66%);
background-size: 20px 20px;
background-color: lighten($y, 40%);
}
div:nth-of-type(75){
background:
linear-gradient(-135deg, $w 8%, $T 8% 92%, $w 92%) 0 6px,
linear-gradient(135deg, $w 8%, $T 8% 92%, $w 92%) 0 6px,
linear-gradient(-135deg, $b 25%, $T 25% 75%, $b 75%),
linear-gradient(135deg, $b 25%, $T 25% 75%, $b 75%);
background-size: 26px 26px;
background-color: $r;
}
div:nth-of-type(76){
background: radial-gradient($T 10%, $r 10% 20%, $T 20%) 0 0 / 30px 30px,
linear-gradient($T 40%, $r 40% 41%,$T 41% 43%, $r 43% 44%, $T 44% 56%, $r 56% 57%, $T 57% 59%, $r 59% 60%, $T 60%) 0 0 / 100% 60px;
}
div:nth-of-type(77){
background:
linear-gradient(120deg, $T 75%, $b 75%),
linear-gradient(240deg, $T 75%, $b 75%),
linear-gradient(120deg, $T 75%, $y 75%) 10px -16.2px,
linear-gradient(240deg, $T 75%, $y 75%) 10px 16.2px ;
background-size: 20px 32.4px;
background-color: lighten($y, 40%);
}
div:nth-of-type(78){
background:
linear-gradient(120deg, $T 75%, $b 75%),
linear-gradient(240deg, $T 75%, $b 75%),
linear-gradient(120deg, $T 75%, $b 75%) 10px -16.2px,
linear-gradient(240deg, $T 75%, $b 75%) 10px 16.2px;
background-size: 20px 32.4px;
background-color: lighten($y, 20%);
}
div:nth-of-type(79){
background:
linear-gradient(-45deg, $v 20%, $T 20% 80%, $v 80% 100%),
linear-gradient(45deg, $v 20%, $T 20% 80%, $v 80% 100%),
linear-gradient(-45deg, $w 33%, $T 33% 66%, $w 66%),
linear-gradient(45deg, $T 33%, $lv 33% 66%, $T 66%);
background-size: 20px 20px;
}
div:nth-of-type(80){
background:
linear-gradient(-45deg, $bl 30%, $T 30% 70%, $bl 70% 100%),
linear-gradient(45deg, $bl 30%, $T 30% 70%, $bl 70% 100%),
linear-gradient(-45deg, lighten($bl, 20%) 33%, $T 33% 66%, lighten($bl, 20%) 66%),
linear-gradient(45deg, $T 33%, darken($bl, 10%) 33% 66%, $T 66%);
background-size: 20px 20px;
background-color: lighten($bl, 20%);
}
div:nth-of-type(81){
background:
repeating-linear-gradient(-35deg, $T 0 4px, rgba($w, 0.5)4px 8px);
background-color: $r;
}
div:nth-of-type(82){
background:
linear-gradient(45deg, $T, lighten($v, 10%)),
repeating-linear-gradient(-35deg, $T 0 4px, rgba($w, 0.5)4px 8px);
background-color: $lv;
}
div:nth-of-type(83){
background:
repeating-linear-gradient(35deg, $T 0 4px, rgba($w, 0.5)4px 8px),
repeating-linear-gradient(-35deg, $T 0 4px, rgba($w, 0.5)4px 8px),
linear-gradient(45deg, $y, lighten($o, 10%));
}
div:nth-of-type(84){
background:
linear-gradient(60deg, darken($o, 20%) 12%, $T 12% 88%, darken($o, 20%) 88%) 15px 27px,
linear-gradient(120deg, darken($o, 20%) 12%, $T 12% 88%, darken($o, 20%) 88%) 15px 27px,
linear-gradient(60deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%),
linear-gradient(120deg, darken($bl, 20%) 25%, $T 25% 75%, darken($bl, 20%) 66%);
background-size: 30px 54px;
background-color: $dg;
}
div:nth-of-type(85){
background:
linear-gradient(60deg, darken($o, 20%) 12%, $T 12% 88%, darken($o, 20%) 88%) 15px 27px,
linear-gradient(120deg, darken($o, 20%) 12%, $T 12% 88%, darken($o, 20%) 88%) 15px 27px,
linear-gradient(60deg, darken($bl, 20%) 16%, $T 16% 84%, darken($bl, 20%) 84%),
linear-gradient(120deg, darken($bl, 20%) 16%, $T 16% 84%, darken($bl, 20%) 84%);
background-size: 30px 54px;
background-color: $dg;
}
div:nth-of-type(86){
background: radial-gradient( $bl 25%, $T 25% 35%, $bl 35% 50%, $T 50%) 20px 20px,
radial-gradient( $bl 25%, $T 25% 35%, $bl 35% 50%, $T 50%);
background-size: 40px 40px;
background-color: lighten($bl, 50%);
}
div:nth-of-type(87){
background: radial-gradient( $bl 15%, $T 15% 20%, $bl 20% 30%, $T 30%) 20px 20px,
radial-gradient( $bl 25%, $T 25% 35%, $bl 35% 50%, $T 50%);
background-size: 40px 40px;
}
div:nth-of-type(88){
background: linear-gradient(120deg, $T 70%, $w 70%),
linear-gradient(240deg, $T 70%, $w 70%),
linear-gradient(120deg, $T 65%, $v 65%),
linear-gradient(240deg, $T 65%,$v 65%),
linear-gradient(120deg, $T 60%, $r 60%),
linear-gradient(240deg, $T 60%, $r 60%);
background-size: 40px 40px;
}
div:nth-of-type(89){
background:
linear-gradient(120deg, $T 80%, $g 80%) 0 10px,
linear-gradient(240deg, $T 80%, $g 80%) 0 10px,
linear-gradient(120deg, $T 80%, $r 80%),
linear-gradient(240deg, $T 80%, $r 80%);
background-size: 40px 40px;
}
div:nth-of-type(90){
background:
linear-gradient(120deg, $T 80%, darken($bl, 10%) 80%) 0 8px,
linear-gradient(240deg, $T 80%, darken($bl, 10%) 80%) 0 8px,
linear-gradient(120deg, $T 75%, lighten($bl, 40%) 75%),
linear-gradient(240deg, $T 75%, lighten($bl, 40%) 75%);
background-size: 40px 40px;
background-color: lighten($bl, 50%);
}
div:nth-of-type(91){
background:
linear-gradient(-60deg, $T 80%, darken($bl, 20%) 80%) ,
linear-gradient(60deg, $T 80%, darken($bl, 20%) 80%),
linear-gradient(120deg, $T 80%, darken($bl, 10%) 80%) 20px 30px ,
linear-gradient(240deg, $T 80%, darken($bl, 10%) 80%) 20px 30px
;
background-size: 40px 40px;
}
div:nth-of-type(92){
background:
linear-gradient(-60deg, $T 85%, rgba(darken($bl, 20%), 0.8) 85%) 0 15px,
linear-gradient(60deg, $T 85%, rgba(darken($bl, 20%), 0.8) 85%) 0 15px,
linear-gradient(-60deg, $T 85%, darken($bl, 10%) 85%) ,
linear-gradient(60deg, $T 85%, darken($bl, 10%) 85%),
linear-gradient(120deg, $T 85%, rgba(darken($bl, 20%), 0.8) 85%) 40px 55px ,
linear-gradient(240deg, $T 85%, rgba(darken($bl, 20%), 0.8) 85%) 40px 55px,
linear-gradient(120deg, $T 85%, darken($bl, 10%) 85%) 40px 40px ,
linear-gradient(240deg, $T 85%, darken($bl, 10%) 85%) 40px 40px
;
background-size: 80px 80px;
}
div:nth-of-type(93){
background: repeating-linear-gradient($T 0 8px, rgba($r, 0.5) 8px 16px),
repeating-linear-gradient(to right,$T 0 8px, rgba($r, 0.5) 8px 16px)
}
div:nth-of-type(94){
background:
radial-gradient($T 45%, $g 46% 50%, $T 50%),
radial-gradient($T 45%, $g 46% 50%, $T 50%) 15px 15px,
radial-gradient($T 45%, $g 46% 50%, $T 50%) 25px 25px;
background-size: 40px 40px;
}
div:nth-of-type(95){
background:
radial-gradient($p 15%, $T 16%),
linear-gradient(45deg, $T 49%, $p 49% 51%, $T 51%),
linear-gradient(-45deg, $T 49%, $p 49% 51%, $T 51%);
background-size: 40px 40px;
}
div:nth-of-type(96){
background:
radial-gradient($T 10%,$b 10% 20%, $T 20% 30%, $b 30% 40%, $T 40% 50%, $b 50% 60%, $T 60% 70%, $b 70% 80%);
background-size: 40px 40px;
}
div:nth-of-type(97){
background:
radial-gradient(circle at 100% 100%,$w 10%,$b 10% 20%, $w 20% 30%, $b 30% 40%, $w 40% 50%, $b 50% 60%, $T 60% ),
radial-gradient(circle at 0 0,$T 10%,$b 10% 20%, $T 20% 30%, $b 30% 40%, $T 40% 50%, $b 50% 60%, $T 60% 70%, $b 70% 80%, $T 80%);
background-size: 40px 40px;
}
div:nth-of-type(98){
background: radial-gradient(circle at 100% 100%,$w 15%, $b 15% 20%, $w 20% 25%, $b 25% 30%, $w 30% 35%, $b 35% 40%, $T 40%),
radial-gradient(circle at 50% 0%,$T 8%,$b 8% 16%, $w 16% 24%, $b 24% 32%, $w 32% 40%, $b 40% 48%, $T 48% ),
radial-gradient(circle at 0 100%,$T 15%, $b 15% 20%, $T 20% 25%, $b 25% 30%, $T 30% 35%, $b 35% 40%, $T 40%);
background-size: 80px 40px;
}
div:nth-of-type(99){
background:
radial-gradient($w 5%,$b 5% 10%, $bl 10% 15%, $b 15% 20%, $o 20% 25%, $y 25% 30%, $r 30% 35%, $b 35% 40%, $v 40% 45%, $b 45% 50%, $dg 50% 55%, $T 55%),
radial-gradient($w 5%,$b 5% 10%, $bl 10% 15%, $b 15% 20%, $o 20% 25%, $y 25% 30%, $r 30% 35%, $b 35% 40%, $v 40% 45%, $b 45% 50%, $dg 50% 55%, $T 55%) 0 20px,
radial-gradient($w 5%,$b 5% 10%, $bl 10% 15%, $b 15% 20%, $o 20% 25%, $y 25% 30%, $r 30% 35%, $b 35% 40%, $v 40% 45%, $b 45% 50%, $dg 50% 55%, $T 55%) 20px 0,
radial-gradient($w 5%,$b 5% 10%, $bl 10% 15%, $b 15% 20%, $w 20% 25%, $y 25% 30%, $r 30% 35%, $b 35% 40%, $v 40% 45%, $b 45% 50%, $dg 50% 55%, $T 55%) 20px 20px;
background-size: 40px 40px;
}
div:nth-of-type(100){
background:
radial-gradient(circle at 50% 100%,$y 5%,$br 5% 10%, $y 10% 15%, $br 15% 20%, $y 20% 25%, $br 25% 30%, $y 30% 35%, $br 35% 40%, $T 40%),
radial-gradient(circle at 100% 50%,$y 5%,$br 5% 10%, $y 10% 15%, $br 15% 20%, $y 20% 25%, $br 25% 30%, $y 30% 35%, $br 35% 40%, $T 40%),
radial-gradient(circle at 50% 0%,$y 5%,$br 5% 10%, $y 10% 15%, $br 15% 20%, $y 20% 25%, $br 25% 30%, $y 30% 35%, $br 35% 40%, $T 40%),
radial-gradient(circle at 0 50%,$y 5%,$br 5% 10%, $y 10% 15%, $br 15% 20%, $y 20% 25%, $br 25% 30%, $y 30% 35%, $br 35% 40%, $T 40%);
background-size: 80px 80px;
background-color: $y;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.