Initial
Portal
Solution:
<p></p>
<style>
body {
background: #f5d6b4;
}
p {
width: 50;
height: 50;
background: #d86f45;
margin: 25 auto 0;
box-shadow: 0 200px 0 0 #d86f45, -100px 100px 0 0 #d86f45,
100px 100px 0 0 #d86f45, 0 100px 0 50px #d86f45;
}
</style>
Minified:
<body bgcolor=F5D6B4><p><style>p{width:50;height:50;background:#D86F45;margin:25 167;box-shadow:0 50vw#D86F45,-25vw 25vw#D86F45,25vw 25vw#D86F45,0 25vw 0 50px#D86F45
Donut
Solution:
<div></div>
<style>
body {
background: #62306d;
}
div {
margin: 50 auto;
width: 120;
height: 120;
border: solid 40px #f7ec7d;
border-radius: 50%;
border-top-color: #e38f66;
transform: rotate(-45deg);
}
</style>
Minified:
<body bgcolor=62306D><p><style>p{margin:13%92;width:120;height:120;border:solid 5ch#F7EC7D;border-radius:50%;border-top-color:E38F66;rotate:-45deg
Converge
Solution:
<div></div>
<style>
body {
background: #e3516e;
}
div {
width: 184;
height: 184;
background: linear-gradient(
45deg,
transparent 115px,
#e3516e 115px,
#e3516e 145px,
transparent 0
), linear-gradient(-45deg, #fade8b 115px, #e3516e 115px, #e3516e 145px, #fade8b
0);
margin: 58 auto;
}
</style>
Minified:
<body bgcolor=#E3516E><p><style>p{width:184;height:184;background:linear-gradient(45deg,transparent 115px,#E3516E 0,#E3516E 145px,transparent 0),linear-gradient(-45deg,#FADE8B 115px,#E3516E 0,#E3516E 145px,#FADE8B 0);margin:58 auto
Upwards
Solution:
<div></div>
<style>
body {
background: #998235;
}
div {
width: 140;
height: 140;
background: linear-gradient(to left, transparent 50%, #0b2429 0),
linear-gradient(#fcbe5c 50%, #998235 0);
margin: 105 auto;
transform: rotate(45deg);
}
</style>
Minified:
<body bgcolor=998235><p><p a><style>p{width:70;height:140;background:#FCBE5C;margin:80 182;rotate:-45deg}[a]{background:#0B2429;rotate:45deg;margin:-220 132.5
Missing Piece
Solution:
<div></div>
<h1></h1>
<style>
body {
background: #d669ec;
}
div {
width: 100;
height: 100;
background: #fdfbf8;
margin: 40 0 0 82;
box-shadow: 120px 0 0 0 #fdfbf8, 0 120px 0 0 #fdfbf8;
}
h1 {
width: 100;
height: 100;
transform: rotate(45deg);
background: #d669ec;
margin: -164 auto;
box-shadow: 175.5px 0px 0 0 #d669ec, -0px 175.5px 0 0 #d669ec,
175.5px 175.5px 0 0 #d669ec;
}
</style>
Minified:
<p><p a><style>*>*,[a]{background:#D669EC}p{width:100;height:100;background:#FDFBF8;color:FDFBF8;margin:40 82;box-shadow:30vw 0,0 30vw}[a]{rotate:45deg;color:D669EC;margin:-204 142;box-shadow:186q 0,0 186q,186q 186q
Rangoli
Solution:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<div></div>
<style>
body {
background: #66284a;
}
h1,
h2,
h3,
h4 {
width: 60px;
height: 60px;
border: solid 20px #f0cd48;
border-radius: 50%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
}
h1 {
margin: 40 auto;
}
h2 {
border-color: #d86f45;
transform: rotate(-90deg);
margin: -80 0 0 82;
}
h3 {
border-color: #d669ec;
transform: rotate(90deg);
margin: -100 0 0 202;
}
h4 {
border-color: #fdfbf8;
transform: rotate(180deg);
margin: -40 auto;
}
</style>
Minified:
<body bgcolor=66284A text=F0CD48><p><p a><p b><p c><style>p{width:60;height:60;border:solid 20px;border-radius:50%;border-top-color:#0000;margin:40 142;rotate:225deg}[a]{color:D86F45;rotate:135deg;margin:-80 82}[b]{color:D669EC;rotate:-45deg;margin:-26%202}[c]{color:FDFBF8;scale:-1;margin:60 142
Pyramid
Solution:
<p></p>
<h1></h1>
<style>
body {
background: #f0cd48;
}
p {
width: 100;
height: 100;
margin: 30 auto;
border-radius: 50%;
background: #66284a;
box-shadow: 25vw 140px #66284a, -25vw 140px #66284a;
}
h1 {
width: 200;
height: 140;
background: linear-gradient(
-55deg,
transparent 148px,
#f0cd48 148px,
#f0cd48 163px,
#f0cd48 0
), linear-gradient(
55deg,
transparent 148px,
#f0cd48 148px,
#f0cd48 163px,
#f0cd48 0
), linear-gradient(#66284a 125px, #f0cd48 0);
margin: -80 auto;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
</style>
Minified:
<body bgcolor=F0CD48><p><h1><style>p{width:0;border:solid 50px#66284A;margin:30 142;border-radius:50%;box-shadow:25vw 140px#66284A,-25vw 140px#66284A}h1{width:200;height:140;background:linear-gradient(-55deg,#00000000 148px,#F0CD48 0),linear-gradient(55deg,#00000000 148px,#F0CD48 0),linear-gradient(#66284A 125px,#F0CD48 0);margin:-80 92;clip-path:polygon(50% 0,100% 100%,0 100%
Flow
Solution:
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>
<style>
body {
background: #d86f45;
}
h1 {
width: 30;
height: 150;
background: #fdfbf8;
border-radius: 20px;
margin: -33 0 0 92;
box-shadow: 170px 0 #fdfbf8;
}
h2 {
width: 80;
height: 130;
border-radius: 50px;
margin: -155 0 0 152;
background: #fdfbf8;
box-shadow: 0 160px #fdfbf8;
}
h3 {
width: 200;
height: 100;
background: #fdfbf8;
margin: 70 auto;
border-radius: 0 0 25vw 25vw;
}
p {
width: 30;
height: 30;
border-radius: 50%;
background: #fdfbf8;
margin: -185 0 0 92;
box-shadow: 170px 0 #fdfbf8, 30px 0 #d86f45, 140px 0 #d86f45;
}
</style>
Minified:
TBD