J's Personal Website [WIP]

--hue: @r(360); --lum: @r(10%, 50%); --s: @r(0.5, 1); --color-mid: hsla(var(--hue), 50%, var(--lum)); --color-light: hsla(calc(var(--hue) - 10 * var(--s)), 50%, calc(var(--lum) + 10% * var(--s))); --color-dark: hsla(calc(var(--hue) + 10 * var(--s)), 50%, calc(var(--lum) - 10% * var(--s))); @grid: 1 / 100%; background-size: 83px 135px; background-color: var(--color-mid); background-image: @doodle( @grid: 2 / 100%; background: @pn(var(--color-dark), var(--color-light), var(--color-light)); transform-origin: @pn(100% 100%, 0 100%, 100% 0, 0 0); transform: rotateX(45deg) skewY(@pn(34deg,-34deg,-34deg)); );

Basic Pattern changes color

:doodle { --colorOne: hsla(196, 99%, 67%, 0.20); --colorTwo: hsla(214, 77%, 60%, 0.20); --colorThree: hsla(229, 100%, 68%, 0.20); --grad: radial-gradient(circle, hsla(0, 0%, 100%, 0.4) 20%, hsla(0, 0%, 100%, 0.2) 35%, hsla(0, 0%, 0%, 0.0) 60%); grid-gap: 2px; background: linear-gradient(180deg, rgb(111, 255, 233) 5%, rgb(58, 80, 107) 20%, rgb(11, 19, 43), #040710); } @grid: 10 / 100vmax; @shape: circle; background: @pick(var(--colorOne),var(--colorTwo),var(--colorThree)); background-image: @doodle( :doodle{ }; @grid: 1 / 100%; @shape: circle; transform-origin: @r(30%) @r(30%); transform: skew( calc(-1 * @r(9deg, 20deg)) ) scale(@r(40%, 70%)); background-image: var(--grad); ); transform: scale(@r(0.5, 2.0)) translate3d(@r(-100%, 100%), @r(-100%, 100%), 0); filter: drop-shadow(2px, 2px, 2px, #fff)

Bubbles I like this one it's really nice imo

:doodle { --s: 0; } :doodle(:hover) { --s: 1; } @grid: 1 / 100vmax ; background-color: lightpink; background-size: 500px; background-image: @doodle( @grid: 16 / 100%; background: hsla(@r(300,310), 30%, @r(15%,30%), 0.95); transform: rotate(@r(360deg)) scale(@r(0.5,0.8)) translate3d(@r(-100%,100%), @r(-100%,100%), 0); clip-path: @shape( points: 100; r: 1/(abs(cos(0.8t/4)/0.8)^1.6+abs(sin(4*0.8t/4)/0.8)^0.9)^(1); ); );

petals kinda

@grid: 16 / 100vmax; background-color: hsla(@r(90,100),30%, 20%, 0.95); transform: rotate(@pn(90deg,45deg, -45deg)); clip-path: @shape( points: @pd(3,5,6); );

idk just some shapes here

@grid:4 / 100vmax; background: hsla(60, 40%, 20%, 0.9); background-image: @doodle( @grid:1 /100% 85%; background: hsla(20,30%,73%,0.9); background-image: @doodle( @grid: 3x1 / 100%; background: hsla( @r(0,360), @r(10%,30%), @r(20%, 50%), 1.0 ); height: @r(100%,150%); width: @pn(100%, @r(60%,90%), 120%); transform: translate3d(calc((@lp - 100%)/4), @r(10%,30%), 0); background-image: @doodle( @grid: 1/ 100% 30%; background: hsla( @r(0,60), @r(10%,20%), @r(50%, 70%), 1.0 ); transform: translate3d(0,30%,0) ); ); );

bookshelf? kinda