Prev Next

Generative Art
With CSS

:doodle { @grid: 14 / 100vmax; --color: #51eaea; } :container { transform: scale(1.4) rotate(45deg); } overflow: hidden; margin: -.5px; border-color: @p(#51eaea, #65799B, #FF9D77, #FB3569); border-width: 1px; border-radius: 50%; border-style: @repeat(4, ( @p(solid, dashed, dotted) )); :after, :before { content: ''; @size: calc(@sqrt(2) * 50%); position: absolute; border-width: inherit; border-color: @p(#51eaea, #65799B, #FF9D77, #FB3569); border-radius: 50%; border-style: @repeat(4, ( @p(solid, dashed, dotted) )); } :after { transform: rotate(@r(-180deg, 180deg)); z-index: 0; background: conic-gradient( from @r(360deg), #E2EEF1 @r(20%, 70%), transparent 0 ); } :before { @size: calc(50% - 2px); background: #fff linear-gradient( @p(#51eaea, #E2EEF1, #FF9D77, #FB3569), @lp() ) 50% 50% / 25% 25% no-repeat; z-index: 1; } @random(.35) { border: none; :after { border: none; background: none; } :before { @size: @r(10%, 20%); border: none; background: @p(#0001, #51eaea, #E2EEF1, #FF9D77, #FB3569); @shape: @p(circle, rhombus, hexagon); } }
https://www.zcool.com.cn/work/ZMjA0NjA3MTI=.html

CSS

直线

:doodle { border: none; height: 10px; background: linear-gradient( to right, #000 67%, transparent 0 ) 0 / 30px 10px repeat-x; }
:doodle { @grid: 2x1 / 70% 5em; } height: 1em; margin: auto 0; background: linear-gradient(@pn(#9999, #000), @lp()) 50% / calc(100% - 1em) 1em no-repeat, radial-gradient(#000 70%, transparent 0) 0 50% / 1em 1em no-repeat, radial-gradient(#000 70%, transparent 0) 100% 50% / 1em 1em no-repeat;

圆形

:doodle { border-radius: 0; }
:doodle { border-radius: 0; background: radial-gradient( #000 70%, transparent 0 ); } :doodle { border-radius: 0; clip-path: circle(50%); } :doodle { border-radius: 0; clip-path: circle(50% at 50% 0); transform: translateY(25%); }

三角形

:doodle { @grid: 2 / 50vmin; gap: 2vmin; } background: linear-gradient( @pn(45deg, -45deg, -135deg, 135deg), #000 50%, transparent 0 ); :after { content:@pn(45, -45, -135, 135); transform: rotate(@pn(45deg, -45deg)) translate(@pn( '0, -80%', '0, -80%', '0, 60%', '0, 60%' )) } :doodle { @grid: 2 / 50vmin; gap: 1vmin; } background: #000; transform: rotate(@r(360deg)); transition: clip-path @r(500ms) ease; clip-path: polygon( @r(100%) 0, 100% @r(100%), 0 @r(100%) ); :doodle { @grid: 6x16 / 100vmin 70vmin; } :after { color: #000; content: \@hex(@calc(0x25a0 + @i())); font-size: 6vmin; } @random(.1) { :after { color: @p(#51eaea, #ff9d76, #fb3569); } } animation: s @r(500ms) linear; @keyframes s { from { transform: scale(0); } to { transform: scale(1); } }

多边形

:doodle { @size: 100%; background: #000; clip-path: polygon(var(--path)); }

nonzero

:doodle { @size: 100%; background: #000; clip-path: polygon( evenodd, var(--path) ) }

evenodd

:doodle { @grid: 9x14 / 100vmin 70vmin; } @size: 7vmin; @shape: alien @p([2-9]) @p([1-9]) @p([1-4]); transform: rotate(@r(360deg)); background: #000; @random(.1) { background: @p( #51eaea, #ff9d76, #fb3569 ); }

CSS Grid

:doodle { @grid: 16 / 100vmax; } transform: scale(@r(.2, .9)); background: rgba(0, 0, 0, @r(.05, .2));
:doodle { @grid: 1x2 / 80vmin 50vmin; } @size: 100% 10px; background: #000; margin: auto; transform: rotate(@pn( 45deg, -45deg )); :doodle { @grid: 5 / 50vmin; } @size: 5px calc(100% * @sqrt(2) + 5px); transform: rotate(@p(45deg, -45deg)); background: #000; margin: auto; transition: @r(500ms) ease; :doodle { @grid: 1x4 / 80vmin 20vmin; gap: 1vmin; } background: #000; border-radius: @pn( 100% 0 0 0, 0 0 0 100%, 0 100% 0 0, 0 0 100% 0 ); :doodle { @grid: 5 / 50vmin; } background: #000; transition: @r(500ms) ease; border-radius: @p( 100% 0 0 0, 0 100% 0 0, 0 0 100% 0, 0 0 0 100% ); :doodle { @grid: 1x50 / 50vmin; overflow: hidden; grid-auto-flow: dense; grid-auto-rows: 1vmin; grid-template-columns: repeat(auto-fill, 1vmin); border: 1px solid #000; } :container { transform: scale(1.2); } margin: -.5px; grid-row-end: span @ri(2, 12); grid-column-end: span @ri(2, 12); border: 1px solid #000; :doodle { @grid: 1x50 / 50vmin; overflow: hidden; grid-auto-rows: 1vmin; grid-template-columns: repeat(auto-fill, 1vmin); border: 1px solid #223141; } :container { transform: scale(1.2); } margin: -.5px; grid-row-end: span @ri(2, 12); grid-column-end: span @ri(2, 12); border: 1px solid #000; :after { position: absolute; content: ''; border: 1px solid #223141; left: -1px; bottom: -1px; @size: @r(10%, 90%); background: @p( transparent, #FF5A59, #E6BBC2, #509DA6 ); }

Properties

:doodle { @grid: 1 / 100vmax; } :container { transform: rotate(23deg) scale(1.5); background: @m(1000, ( linear-gradient( transparent, rgba(0, 0, 0, @r(.4)) ) @r(100%) @r(100%) / 1px @r(20vmin) no-repeat, radial-gradient( rgba(0, 0, 0, @r(.4)) 50%, transparent 0 ) @r(100%) @r(100%) / @r(20px) @lr() no-repeat )), @m(100, ( radial-gradient( transparent calc(50% - .5px), calc(50% - .5px), rgba(0, 0, 0, @r(.2)), calc(50% + .5px), rgba(0, 0, 0, @r(.2)), transparent calc(50% + .5px) ) @r(100%) @r(100%) / @r(10vmin) @lr() no-repeat )); }

border-style

:doodle { @grid: 1x4 / 90vmin 22.5vmin; transform: translateY(-4vmin); --radius: @p(0, 50%); } margin: 1vmin; border: 10px solid #000; transition: .2s ease; border-radius: var(--radius); border-style: @pn(solid, dashed, dotted, double); :after { content: @lp(); position: absolute; font-size: 5vmin; top: calc(100% + 4vmin); }

border-image

Gradient

:doodle { @grid: 1x3 / 90vmin 30vmin; transform: translateY(-4vmin); } --linear: linear-gradient(#000, transparent); --radial: radial-gradient(#000, transparent); --conic: conic-gradient(#000, transparent); :before { content: ''; @size: 100%; transform: scale(.9); background: @pn( var(--linear), var(--radial), var(--conic) ); } :after { content: @pn(linear-, radial-, conic-); position: absolute; font-size: 5vmin; top: calc(100% + 4vmin); }

box-shadow

:doodle { @grid: 1 / 30vmin; } transform: translateX(-50%); background: #000; border-radius: 50%; box-shadow: 1em 0 0 #666, 2em 0 0 #eee;

text-shadow

:doodle { @grid: 8 / 70vmin; overflow: hidden; background: #fff; } :after { transform: rotate(@r(-45deg, 45deg)) translate(@r(-50%, 50%), @r(-50%, 50%)); position: absolute; content: \@hex(@r(0x2F00, 0x2F5F)); xcontent: @pd([A-Z]); font-size: @r(5vmin, 30vmin); --rgb: @p( (53, 35, 75), (92, 59, 111), (216, 76, 115), (255, 132, 132) ); color: rgb(var(--rgb)); font-weight: bold; text-stroke: @r(2px) #fff; xcolor: transparent; text-shadow: @multi(10, ( calc(@n() * 1px) calc(@n() * 1px) 0 @pn(currentColor, #fff) )), @multi(10, ( calc((@n() + 10) * 1px) calc((@n() + 10) * 1px) 0 @pn(rgba(var(--rgb), .1), #fff) )) }

text-decoration

wavy

:doodle { @grid: 20x1 / 80vmin; } :container { perspective: 30px; } position: absolute; left: 50%; top: 50%; @size: 50% 1px; transform-origin: 0 center; transform: rotate( calc(360deg / @size() * @i()) ) rotateY(-54deg); --r: @pn(0, -180deg); :after { content: @repeat(2, ____----____----____----____----); font-size: 3vmin; background: transparent; position: absolute; left: 0%; color: transparent; text-decoration: line-through @p(wavy) @pd(#feffdf, #ffe79a, #FFA952, #EF5A5A); transform-style: preserve-3d; transform: rotateX(var(--r)) translateX(-5%); } mix-blend-mode: overlay; :doodle { @grid: 24x1 / 80vmin; } :container { perspective: 50px; animation-direction: alternate; animation-fill-mode: both; } position: absolute; left: 50%; top: 50%; @size: 50% 1px; transform-origin: 0 center; transform: rotate( calc(360deg / @size() * @i()) ) rotateY(-54deg); --r: @pn(0, -180deg); :after { content: @repeat(3, ____----____----____----____----); font-size: 2vmin; background: transparent; position: absolute; left: 0%; color: transparent; text-decoration: line-through @p(wavy) @pd(#ff008b, #faf7e6, #FFF8A0, #73DBC4); transform-style: preserve-3d; transform: rotateX(var(--r)) translateX(0%); will-change: transform; animation-fill-mode: both; } mix-blend-mode: overlay; @keyframes p { from { perspective: 50px; } to { perspective: 1px; } } @keyframes r { from { opacity: 1; } to { opacity: 0; } }

SVG filters

Clouds

Animation

:doodle { @grid: 50x1 / 50vmin; perspective: 23vmin; } background: @multi(@r(200, 240), ( radial-gradient( @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50% ) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat )); @size: 80%; @place-cell: center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 20s linear infinite; animation-delay: calc(@i() * -.4s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }

CSS Fractal

em em em em em em

DOM tree

:doodle { @grid: 1x2x9 / 30vmin; } :container { @size: 1px 70%; background: #000; margin: auto; } @size: 1px 70%; background: #000; position: absolute; bottom: 100%; transform-origin: 50% 100%; transform: rotate(@pn(-23deg, 15deg));

CSS Houdini

Little language

Never stop learning

Thank you