W tym wpisie pokażę, jak utworzyć plik SVG zawierający powtarzający się wzór. Nastęnie użyję tego wzoru jako tła akapitu. Plik SVG będę tworzyć ręcznie, jednak na końcu wpisu podam odnośniki do kilku stron zawierających narzędza do wygenerowania wzoru SVG.

Co przedstawia mój wzór? Świąteczną babeczkę. Niektórzy widzą w nim jednak cycuszki. Oh, well... :)

Utworzenie pliku svg

Plik svg, od którego zacznę zabawę w tworzenie wzoru, zawiera definicję przestrzeni nazw (konieczną do tego, aby plik był poprawnie wyświetlony przez przeglądarkę) oraz szerokość i wysokość ustaloną na 100%:

1
2
3
4
5
6

  <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width="100%" 
      height="100%">

  </svg>

Wzory definiowane w sekcji <defs> służą do wypełnienia znajdujących się w grafice kształtów. Wskazuje się je przy użyciu funkcji url (która przyjmuje identyfikator wzoru, czyli jego atrybut id), której wartość zasili atrybut fill w wypełnianym kształcie.

Element svg będzie zawierał jeden kształt - prostokąt wypełniający cały dostępny obszar - dla którego ustawię atrybut fill odnoszący się do elementu o identyfikatorze kropki:

1
2

      <rect x="0" y="0" width="100%" height="100%" fill="url(#kropki)" />

Element o id kropki będzie się znajdował w sekcji defs - i będzie to element <pattern> definiujący pojedynczy fragment grafiki. Użyję również elementu style do zdefiniowania kolorów:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    <style>
      .big {fill: hsl(333, 30%, 60%)}
      .mid {fill: hsl(333, 40%, 80%)}
      .small {fill: hsl(333, 50%, 70%)}
    </style>
    <defs>
      <pattern id="kropki" x="0" y="0" width="35" height="35" 
          patternUnits="userSpaceOnUse">
        <circle class="big" cx="15" cy="20" r="10" />
        <circle class="mid" cx="15" cy="18" r="8" />
        <circle class="small" cx="15" cy="15" r="5" />
      </pattern>
    </defs>

Ten fragment - zajmujący obszar od (x = 0, y = 0) do (x = 35, y = 35) - będzie się powtarzał w pionie i w poziomie w całym obszarze wypełnianego prostkąta. Całość wygląda więc tak:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

  <svg xmlns="http://www.w3.org/2000/svg" 
  width="100%" height="100%"
  style="stroke: none">
    <style>
      .big {fill: hsl(333, 30%, 60%)}
      .mid {fill: hsl(333, 40%, 80%)}
      .small {fill: hsl(333, 50%, 70%)}
    </style>
    <defs>
      <pattern id="buzie" x="0" y="0" width="40" height="40"
               patternUnits="userSpaceOnUse">
        <circle class="big" cx="15" cy="20" r="10" />
        <circle class="mid" cx="15" cy="18" r="8" />
        <circle class="small" cx="15" cy="15" r="5" />
      </pattern>
    </defs>

    <rect x="0" y="0" width="100%" height="100%" fill="url(#buzie)" />
  </svg>

Tutaj można pobrać cały plik bg_circles.svg

Definiowanie tła dla akapitu

Używam atrybutu background-image wskazującego na plik .svg. Wzór pojawi się jako tło elementu div, który w poniższym przykładzie zawiera jeden nagłówek i jeden akapit:

1
2
3
4
5
6

  <div style="
    background-image: url(/bg-circles.svg); 
    min-height: 5em">
    <h4> Tytuł akapitu </h4>
    <p> A to jest styl z tłem.</p>
  </div>

Akapit (div) z tłem

Istnieje kilka inspirujących miejsc w sieci, skąd można ściągnąć gotowe (lub wygenerować losowe, bądź utworzyć własne) bardzo ciekawe graficznie wzory. Na przykład:

1. Hero patterns
2. Pattern ninja
3. Bardzo prosty stripe generator
4. Projekt na codepen