Comments (1)
Yoav Kadosh
6 months ago
Very cool! You can't make skewed circles with pure gradients... The closest you can get is an ellipse. I should add support for elements and allow transforms to be applied on them 😁
CSS
width: 500px;
height: 500px;
background:
linear-gradient(150deg, rgba(255,255,255,0) 20%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 80%) 298px 379px / 10px 30px no-repeat no-repeat, /* usb */
linear-gradient(150deg, rgba(69,255,144,0) 14.29%, rgba(154,153,153,1) 14.29%, rgba(154,153,153,1) 81.43%, rgba(69,168,255,0) 81.63%) 264px 122px / 48px 360px no-repeat no-repeat, /* right */
linear-gradient(196deg, rgba(255,255,255,0) 27.35%, rgba(255,255,255,1) 27.55%, rgba(255,255,255,1) 77.76%, rgba(255,255,255,1) 77.96%, rgba(69,168,255,0) 77.96%) 104px 37px / 160px 469px no-repeat no-repeat, /* left */
linear-gradient(330deg, rgba(216,216,216,1) 44.49%, rgba(255,255,255,1) 44.49%, rgba(69,255,144,0) 44.49%) 104px 66px / 48px 90px no-repeat no-repeat, /* top_02 */
linear-gradient(16deg, rgba(216,216,216,1) 44.49%, rgba(255,255,255,1) 44.49%, rgba(69,255,144,0) 44.49%) 152px 88px / 160px 65px no-repeat no-repeat, /* top_01 */
linear-gradient(rgba(216,216,216,1), rgba(216,216,216,1)) 158px 153px / 154px 34px no-repeat no-repeat, /* top_00 */
linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1)) 0px 0px / 500px 500px no-repeat no-repeat; /* bg */
Layers (7)
usb
linear
right
linear
left
linear
top_02
linear
top_01
linear
top_00
solid
bg
solid
GRADIENT
.ART
css