Link List

Free, open-source load­ing ani­ma­tions. Avail­able as copy/​paste HTML or drop-in web com­po­nents. Com­pat­i­ble with every mod­ern frame­work.

JavaScript and WebAssem­bly imple­men­ta­tions of the Held-Karp algo­rithm for solv­ing the trav­el­ling sales­man prob­lem — qnt­m/held-karp

Unsec­tion is a web­site that offers inspi­ra­tion for var­i­ous web­site sec­tions. It is a good resource for find­ing the best web­site sec­tion for your web­site.

Use gen­er­a­tive art for your place­hold­er images

A dive into mak­ing beau­ti­ful gray col­or palettes with CSS.

Color.js is designed make sim­ple things easy, and com­plex things pos­si­ble, and that extends to instal­la­tion as well.

Ani­cons is an exper­i­ment that com­bines two cut­ting-edge font tech­nolo­gies: vari­able fonts and col­or fonts.

Explore the time­line of mile­stones in the his­to­ry of web design from 1990 to the present day.

Sys­tem font stack CSS orga­nized by type­face clas­si­fi­ca­tion for every mod­ern OS. The fastest fonts avail­able. No down­load­ing, no lay­out shifts, no flash­es — just instant ren­ders.

Best-in-class Design Sys­tems with com­po­nents and foun­da­tions ref­er­ences from top-tier tech com­pa­nies and lead­ing UI teams.

A font based on Voronoi algo­rithm

Adding noise tex­ture with only code to SVG.

Foot­er is a curat­ed gallery of the top web­site foot­er inspi­ra­tion on earth. Find the foot­ers you need and sort by type and style.

Inter is a type­face fam­i­ly

A visu­al & inter­ac­tive SVG ref­er­ence. Quick­ly look up how to define SVG shapes, trans­forms, masks, pat­terns, gra­di­ents, text and more.

Gen­er­ate seam­less, unique, roy­al­ty-free pat­terns to use for free in any project. Export as SVG, JPEG, or PNG.

PDP‑8 / SBC6120 Deep Thought Front Pan­el Toy with the deep thought blink­ing lights, aka ​“blinken­lights” pro­gram.

Hi. My name is Cabel. And I’ve prob­a­bly got the neat­est job in the whole world. I wear many hats. But here on my per­son­al blog, I get to write about the things I real­ly care about, just for you. And from the fact that you’re read­ing this blog aLt all, I think you may…

Archive of dif­fer­ent cor­po­rate design aes­thet­ics through the ages

Send­Cut­Send is an online CNC and laser cut­ting ser­vice, spe­cial­iz­ing in alu­minum, steel, brass, plas­tics, tita­ni­um, and more. Fast turn­around and free ship­ping!

Who will design the next gen­er­a­tion of read­able, writer­ly web lay­outs? Who will design them? Lay­outs for sites that are most­ly writ­ing. Designed by peo­ple who love writ­ing. Where text can be engag­ing even if it isn’t off­set by art or pho­tog­ra­phy. Where text is the point. With well-con­sid­ered flex­i­ble type­set­ting, mod­u­lar scal­ing, and read­able mea­sures across a full range…

The gray palette of a design sys­tem is the scaf­fold­ing that sup­ports all oth­er col­ors that occur in a dig­i­tal expe­ri­ence. The new set of grays for the Red Hat Design Sys­tem was craft­ed with care…

Cre­ate ful­ly respon­sive shape dividers for your next web project.

What if I will tell you how we could solve fit-to-width text with pure CSS with­out any hard­cod­ed para­me­ters? Curi­ous­ly, scroll-dri­ven ani­ma­tions will allow us to do just that! Join me as I con­tin­ue explor­ing the exper­i­men­tal imple­men­ta­tions of the lat­est specs.

This ref­er­ence lists all the ele­ments we’ve intro­duced, and their attrib­ut­es. A few ele­ment-spe­cif­ic pre­sen­ta­tion attrib­ut­es are includ­ed, but the full ref­er­ence for pre­sen­ta­tion attrib­ut­es is the SVG Style Prop­er­ties list.

Ape­ri­od­ic tiling, in which shapes can fit togeth­er to cre­ate infi­nite pat­terns that nev­er repeat, has fas­ci­nat­ed math­e­mati­cians for decades, but until now no one knew if it could be done with just one shape