Ebben az esetben az ábrát egy külső JS fájl állítja elő, majd küldi át a weblap egy meghatározott részére. A háromszögek kiindulási alakja egy félbevágott négyzet, ezért minden iterációban két háromszög kerül megrajzolásra, így a végeredmény 18 db háromszögből áll össze. A háromszögek színét egy előre meghatározott színpalettából egy véletlenszám generátor választja ki. Az így kapott absztakt kép a böngésző frissítésekor átrendeződik.

Ezt a rajzolatot is egy külső JS fájl állítja elő, majd küldi át a weblap egy meghatározott részére. A csillagok elhelyezkedését egy véletlenszám generátor adja meg, pontosabban a felső csúcsok koordinátáit, a többi csúcs koordinátája pedig abból számolódik ki. Az átlátszóságot konstans 0.5-re állítottam be, a körvonaluk pedig a saját színükkel egyezik meg. Az egyes csillagok színét szintén egy előre meghatározott színpalettából szintén véletlenszám generátor választja ki. A csillagok száma statikus, 25-öt állítottam be rá. Ha frissíted az oldalt, a csillagok elhelyezkedése és színe is megváltozik.

Itt is egy külső JS fájl állítja elő a képet, majd küldi át a weblap egy meghatározott részére. A véletlenszám generátor a körök középpontját, sugarát, színét, és az átlátszóságukat határozza meg. Akárcsak az előző esetekben, a színek itt is egy előre definiált színpalettából kerülnek kiválasztásra. A körök száma statikus, 10 db. Ennek a rajzolatnak az ötletét a szappanbuborékok adták, a különböző mértékű átlátszósággal és a fekete kontúrral igyekeztem imitálni ezt a hatást. Itt is igaz az, hogyha frissíted az oldalt, a körök elhelyezkedése és színe is megváltozik.

Ennek a képnek a különlegessége a középpontos színátmenet, ami az összes egymásra helyezett körre jellemző; a színek kiválasztását pedig a lollipop típusú nyalókák ihlették (igen, tudom, azok mintázata csigavonalban csavarodik). Ez a kép abban különbözik a fentiektől, hogy ennek előállításához nem használtam véletlenszám generátort, így az oldalfrissítés nincs rá hatással; valamint inline SVG kódot használtam. Plusz raktam rá egy ferdén írott szót is.

Ez itt egy példa az ismétlődő sablonra. Manapság nagyon divatos (és nekem is tetszik) a hexagon mintájú csempe a fürdőszobában. Ez az ábra úgy készült, hogy megadtam a vonalak koordinátáit, majd beállítottam a rajzolás ismétlésének paramétereit ( = egy sorban hányszor rajzolódjon ki a minta). Itt is inline SVG kóddal állítottam elő a látványt.

PNG képek (mint itt a parfümös üvegek) számára egyedi háttereket lehet így csinálni.