SVG-kuvio-generaattori

SVG Pattern Generator luo toistuvia laatoitettuja taustoja määrittelemällä SVG <pattern> -elementin, joka on täytetty yhdellä toistetulla muodolla. Se tarjoaa kuusi muototyyppiä (ympyrät, neliöt, kolmiot, viivat, ristit, timantit), jotka on piirretty ääriviivaprimitiiveinä, sitten laatoittaa ne 200x200-esikatseluun ja vie täydellisen SVG-merkinnän käyttöön verkkosivuilla, CSS-taustojen tai suunnittelutiedostoissa.

1. Valitse Kuviotyyli kuudesta painikevalinnasta. 2. Säädä Koko-liukusäädintä (10–60 px) asettaaksesi sekä laatan mitat että muodon asteikon. 3. Säädä Viivan leveys -liukusäädintä (0.5–6.0). 4. Käytä Kiertoa (0–360 astetta, 5 asteen välein) kiertääksesi laatan patternTransform-ominaisuuden kautta. 5. Aseta Muodon väri ja Taustaväri käyttämällä kahta väriytymää. 6. Napsauta Kopioi kopioidaksesi luodun SVG:n leikepöydällesi.

Viedy SVG on 200x200 ja siinä on <defs><pattern> -lohko, jossa käytetään patternUnits="userSpaceOnUse" -ominaisuutta. Kuvion leveys ja korkeus ovat yhtä suuret kuin Koko-arvo, joten jokainen laatta toistuu ruudukossa, jonka koko on tämä. Tausta <rect>, joka on täytetty Taustavärillä, piirretään ensin, sitten toinen <rect>, joka on täytetty url(#pat), peittää laatat. Kun Kierto on nollasta poikkeava, kiertoa käytetään sekä patternTransform="rotate(N)" kuvioelementissä että rotate(N size/2 size/2) -muunnoksella muodon itsensä sisällä.