Comments (2)
David Yushkov
David Yushkov
9 months ago

i had some errors to save changes i've made, so final result on CodePen https://codepen.io/fleple/pen/VwdBYPE

Yoav Kadosh
Yoav Kadosh
1 year 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
px
%
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 */

X Box Series S

David Yushkov

how to make circles skewed?

Colors

Views

858

Layers

7
Open in editor
Layers (7)
usb
linear
right
linear
left
linear
top_02
linear
top_01
linear
top_00
solid
bg
solid