CSS-kuviotaustageneraattori

Useimmat ”kuviogeneraattorit” käyttävät hiljaisesti samaa repeating-linear-gradient-kaavaa jokaiselle vaihtoehdolle ja muuttavat vain numeroita. Tämä ei tee niin: jokainen kuudesta kuviotyypistä rakennetaan nimenomaan sillä CSS-tekniikalla, joka kyseisen muodon todella tuottaa. Raidat käyttävät yhtä repeating-linear-gradientia kahdella värivyöhykkeellä. Pisteet käyttävät yhtä radial-gradientia, joka ruudutetaan puhtaasti background-sizen avulla — klassinen CSS-pistetemppu — eikä repeating-radial-gradientia, joka ei pysty ruuduttamaan pyöreää pistettä siististi suorakaiteen muotoisessa ruudukossa. Shakkilauta käyttää aitoa nelikenttäistä conic-gradient-kaavaa: neliömäisen ruudun keskelle sijoitettu kartiomainen liukuväri jakautuu luonnostaan neljäksi neliön sektoriksi 90 asteen rajoilla, ja kahden värin vuorottelu näiden sektoreiden yli ruuduttaa aidoksi shakkilaudaksi, ei likiarvoksi.

Ruudukko ja vinoristikko kerrostavat molemmat kaksi repeating-linear-gradientia erillisinä background-image-merkintöinä sen sijaan, että toista suuntaa teeskenneltäisiin reunatemppujen avulla. Ruudukko yhdistää ”oikealle” ja ”alas” -toistoliukuvärin teräviä vaaka- ja pystyviivoja varten. Vinoristikko kerrostaa +45 asteen ja -45 asteen toistoliukuvärin korimaiselle vinosuuntaiselle kudokselle — on syytä olla tarkkana: tämä on rehellinen vinoristikko, ei aitoa kalanruotogeometriaa, ja työkalu nimeää sen sellaisena liioittelematta. Kolmiot käyttävät uudelleen shakkilaudan nelikiilaista conic-gradient-tekniikkaa, mutta liukuväri aloitetaan 45 astetta kierrettynä, mikä siirtää kiilarajat ruudun reunojen keskipisteistä sen kulmiin ja muuttaa samat neljä kiilaa neljäksi kulmasta kulmaan -kolmioksi nelikenttäneliöiden sijaan.

Jokainen kuviotyyppi näyttää vain ne säätimet, jotka todella vaikuttavat siihen — kulmasäädin tulee näkyviin raidoille, pisteen säde ja välistys pisteille, viivan paksuus ruudukolle ja vinoristikolle — ja suuri ruudutettu esikatselualue uudelleenpiirtyy jokaisesta muutoksesta, jotta voit nähdä useita täysiä toistoja ennen arvon vahvistamista. Käännä tulostustila SVG:hen, niin sama kuvio ilmestyy <pattern>-elementtinä, joka on rakennettu yksinkertaisista rect-, circle-, path- tai polygon-primitiiveistä ja on valmis liitettäväksi minkä tahansa SVG-dokumentin <defs>-osioon, ja mukana on yhden napsautuksen lataus itsenäisenä .svg-tiedostona.

Kaikki toimii paikallisesti selaimessasi: ei kuvien lähetyksiä, ei palvelinyhteyksiä, ei tiliä. Yksivärisiin tai liukuväritäyttöihin ilman toistoa tämän sivuston CSS-liukuvärigeneraattori on oikea työkalu; tämä on nimenomaan toistuviin geometrisiin taustoihin, jotka on rakennettu ilman yhtäkään kuva-assettia.