Comments (2)
David Yushkov
1 year ago
i had some errors to save changes i've made, so final result on CodePen https://codepen.io/fleple/pen/VwdBYPE
Yoav Kadosh
2 years 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, rgb(255 255 255 / 0) 20%, rgb(0 0 0 / 1) 20%, rgb(0 0 0 / 1) 80%, rgb(0 0 0 / 0) 80%) 298px 379px / 10px 30px no-repeat no-repeat, /* usb */
linear-gradient(150deg, rgb(69 255 144 / 0) 14.29%, rgb(154 153 153 / 1) 14.29%, rgb(154 153 153 / 1) 81.43%, rgb(69 168 255 / 0) 81.63%) 264px 122px / 48px 360px no-repeat no-repeat, /* right */
linear-gradient(196deg, rgb(255 255 255 / 0) 27.35%, rgb(255 255 255 / 1) 27.55%, rgb(255 255 255 / 1) 77.76%, rgb(255 255 255 / 1) 77.96%, rgb(69 168 255 / 0) 77.96%) 104px 37px / 160px 469px no-repeat no-repeat, /* left */
linear-gradient(330deg, rgb(216 216 216 / 1) 44.49%, rgb(255 255 255 / 1) 44.49%, rgb(69 255 144 / 0) 44.49%) 104px 66px / 48px 90px no-repeat no-repeat, /* top_02 */
linear-gradient(16deg, rgb(216 216 216 / 1) 44.49%, rgb(255 255 255 / 1) 44.49%, rgb(69 255 144 / 0) 44.49%) 152px 88px / 160px 65px no-repeat no-repeat, /* top_01 */
linear-gradient(rgb(216 216 216 / 1), rgb(216 216 216 / 1)) 158px 153px / 154px 34px no-repeat no-repeat, /* top_00 */
linear-gradient(rgb(0 0 0 / 1), rgb(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