コニファ・ロゴ

ツール集:backgroundに使うパターン用画像(svg)まとめ

このページは、「backgroundに使うパターン用画像まとめ」のsvg版です。パターン用の小さなgif画像の替わりにsvgを使用しています。svgはベクター画像ですので、拡大しても劣化することはないため、サイズを変更して流用することができます。また、CSS用にエンコードしてページに埋め込んだ場合はリンク切れの心配がありません。 サンプルの(1)から(14)までが、CSS用にエンコードしたものです。

サンプル(1)

sample1

サンプル(1)CSSソース

.sample1 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22 opacity='0.3' 
  %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 opacity='0.3' %2F%3E %3C%2Fsvg%3E");
	}

サンプル(2)

sample2

サンプル(2)CSSソース

.sample2 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='7' height='7' fill=%22violet%22 viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 
  r=%220.25%22 fill=%22violet%22 opacity='0.8' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 
  fill=%22violet%22 opacity='0.8' %2F%3E %3C%2Fsvg%3E");
	}

サンプル(3)

sample3

サンプル(3)CSSソース

.sample3 {
	background: #f7d292 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22 
  fill=%22%23ffffff%22 opacity='1' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 fill=%22%23ffffff%22 
  opacity='1' %2F%3E %3C%2Fsvg%3E");
	}

サンプル(4)

sample4

サンプル(4)CSSソース

.sample4 {
	background: #C3C3ED url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='7' height='7' viewBox=%220 0 2 2%22%3E %3Ccircle cx=%220.25%22 cy=%220.25%22 r=%220.25%22 
  fill=%22%23ffffff%22 opacity='1' %2F%3E %3Ccircle cx=%221.25%22 cy=%221.25%22 r=%220.25%22 fill=%22%23ffffff%22 
  opacity='1' %2F%3E %3C%2Fsvg%3E");
	}

サンプル(5)

sample5

サンプル(5)CSSソース

.sample5 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='14' height='14' viewBox=%220 0 4 4%22%3E %3Ccircle cx=%220.5%22 cy=%220.5%22 r=%220.5%22 opacity='0.25' 
  %2F%3E %3Ccircle cx=%222.5%22 cy=%222.5%22 r=%220.5%22 opacity='0.25' %2F%3E %3C%2Fsvg%3E ");
	}

サンプル(6)

sample6

サンプル(6)CSSソース

.sample6 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 
  width='14' height='14' viewBox=%220 0 4 4%22%3E %3Ccircle cx=%220.5%22 cy=%220.5%22 r=%220.5%22 
  fill=%22%238cbfed%22 opacity='0.7' %2F%3E %3Ccircle cx=%222.5%22 cy=%222.5%22 r=%220.5%22 fill=%22%238cbfed%22 
  opacity='0.7' %2F%3E %3C%2Fsvg%3E");
	}

サンプル(7)

sample7

サンプル(7)CSSソース

.sample7 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%226%22 height=%226%22 viewBox=%220 0 6 6%22%3E %3Crect x=%22-0.01%22 y=%22-0.01%22 fill=%22%23FFFFFF%22 
  width=%226%22 height=%226%22%2F%3E %3Crect x=%221.49%22 y=%221.49%22 transform=%22matrix(0.7071 -0.7071 0.7071 0.7071 -1.2386 2.9902)%22 fill=%22none%22 stroke=%22%23BADD83%22 width=%223%22 height=%223%22%2F%3E %3C%2Fsvg%3E");
	}

サンプル(8)

sample8

サンプル(8)CSSソース

.sample8 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%226%22 height=%226%22 viewBox=%220 0 6 6%22%3E %3Crect x=%22-0.01%22 y=%22-0.01%22 fill=%22%23FFFFFF%22 
  width=%226%22 height=%226%22%2F%3E %3Crect x=%221.49%22 y=%221.49%22 transform=%22matrix(0.7071 -0.7071 0.7071 0.7071 -1.2386 2.9902)%22 fill=%22none%22 stroke=%22%2383DBD1%22 width=%223%22 height=%223%22%2F%3E %3C%2Fsvg%3E");
	}

サンプル(9)

sample9

サンプル(9)CSSソース

.sample9 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%228px%22 height=%228px%22 viewBox=%220 0 8 8%22%3E %3Crect x=%224%22 y=%222%22 fill=%22%23B7C5F7%22 
  width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%224%22 fill=%22%23B7C5F7%22 width=%222%22 
  height=%222%22%2F%3E %3Cpolyline fill=%22%23B7C5F7%22 points=%220%2C8 0%2C6 2%2C6 2%2C8 %22%2F%3E %3Cpolyline 
  fill=%22%23B7C5F7%22 points=%224%2C8 4%2C6 6%2C6 6%2C8 %22%2F%3E %3Crect x=%226%22 y=%224%22 fill=%22%23B7C5F7%22 
  width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 fill=%22%23B7C5F7%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");
	}

サンプル(10)

sample10

サンプル(10)CSSソース

.sample10 {
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%228px%22 height=%228px%22 viewBox=%220 0 8 8%22%3E %3Crect x=%224%22 y=%222%22 fill=%22%23D7ADE0%22 
  width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%224%22 fill=%22%23D7ADE0%22 width=%222%22 
  height=%222%22%2F%3E %3Cpolyline fill=%22%23D7ADE0%22 points=%220%2C8 0%2C6 2%2C6 2%2C8 %22%2F%3E %3Cpolyline 
  fill=%22%23D7ADE0%22 points=%224%2C8 4%2C6 6%2C6 6%2C8 %22%2F%3E %3Crect x=%226%22 y=%224%22 fill=%22%23D7ADE0%22 
  width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 fill=%22%23D7ADE0%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");
	}

サンプル(11)

sample11

サンプル(11)CSSソース

.sample11 {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22
 width=%2235.43px%22 height=%2235.43px%22 viewBox=%220 0 35.43 35.43%22%3E %3Cg%3E %3Cpath fill=%22%2390C9D6%22 d=%22M12.399%2C0.006L12.399%2C0.006L12.399%2C0.006L12.399%2C0.006z 
 M5.313%2C0.006L5.313%2C0.006L5.313%2C0.006L5.313%2C0.006z M15.942%2C1.778V0.007H12.4l5.314%2C5.314l-0.886%2C0.886l-5.315-5.315l0.886-0.885H8.856l1.771%2C1.771L8.856%2C3.55l0.886%2C0.886 L8.856%2C5.322L7.971%2C4.436L8.856%2C3.55L7.085%2C1.778l1.771-1.771H5.313l0.886%2C0.886L0.884%2C6.208l-0.886-0.886v3.543l1.772-1.771 l1.771%2C1.771l0.886-0.886l0.886%2C0.886L4.428%2C9.75L3.542%2C8.865l-1.771%2C1.772l-1.772-1.772v3.542l0.886-0.885l5.315%2C5.315 l-0.886%2C0.886l-5.315-5.315v3.543h1.772v1.772h14.172v-1.772h1.772V1.778H15.942z 
 M17.715%2C8.865l-1.772%2C1.772l-1.771-1.772 L13.285%2C9.75l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L17.715%2C8.865z M12.399%2C10.636l-1.771%2C1.771l-0.886-0.886 l1.771-1.772L12.399%2C10.636z M11.514%2C2.664l3.543%2C3.543l-0.886%2C0.886L10.628%2C3.55L11.514%2C2.664z M10.628%2C5.321l1.771%2C1.771 l-0.886%2C0.886L9.742%2C6.207L10.628%2C5.321z 
 M8.856%2C7.093l1.771%2C1.772l-1.771%2C1.771L7.085%2C8.865L8.856%2C7.093z M7.971%2C6.208 L6.199%2C7.979L5.313%2C7.093l1.771-1.771L7.971%2C6.208z M3.542%2C7.093L2.656%2C6.208l3.543-3.543L7.085%2C3.55L3.542%2C7.093z M6.199%2C9.75 l1.771%2C1.772l-0.886%2C0.886l-1.771-1.772L6.199%2C9.75z M6.199%2C15.065l-3.544-3.543l0.887-0.886l3.543%2C3.544L6.199%2C15.065z M8.856%2C17.723l-1.771-1.772l1.771-1.771l-0.886-0.886l0.886-0.886l0.886%2C0.886L8.856%2C14.18l1.771%2C1.771L8.856%2C17.723z M14.171%2C10.636l0.886%2C0.886l-3.543%2C3.543l-0.886-0.886L14.171%2C10.636z M12.399%2C17.723l-0.886-0.886l5.315-5.315l0.886%2C0.886 L12.399%2C17.723z M-0.002%2C12.408L-0.002%2C12.408L-0.002%2C12.408L-0.002%2C12.408z M1.771%2C0.007v1.771h-1.772v3.543l5.315-5.315H1.771z%22 %2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M30.116%2C0.006L30.116%2C0.006L30.116%2C0.006L30.116%2C0.006z 
 M23.03%2C0.006L23.03%2C0.006L23.03%2C0.006L23.03%2C0.006z M33.659%2C1.778V0.007h-3.543l5.314%2C5.314l-0.886%2C0.886L29.23%2C0.892l0.885-0.885h-3.542l1.771%2C1.771L26.573%2C3.55l0.886%2C0.886 l-0.886%2C0.886l-0.886-0.886l0.886-0.886l-1.771-1.771l1.771-1.771H23.03l0.886%2C0.886l-5.315%2C5.315l-0.886-0.886v3.543l1.771-1.772 l1.771%2C1.772l0.886-0.886l0.887%2C0.886L22.144%2C9.75l-0.886-0.886l-1.771%2C1.772l-1.771-1.772v3.542l0.886-0.885l5.314%2C5.315 l-0.886%2C0.886l-5.314-5.315v3.543h1.771v1.772h14.173v-1.772h1.772V1.778H33.659z M35.431%2C8.865l-1.771%2C1.772l-1.771-1.772 L31.002%2C9.75l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L35.431%2C8.865z M30.116%2C10.636l-1.771%2C1.772l-0.886-0.886 L29.23%2C9.75L30.116%2C10.636z M29.23%2C2.664l3.543%2C3.543l-0.886%2C0.886L28.345%2C3.55L29.23%2C2.664z M28.345%2C5.321l1.771%2C1.771 L29.23%2C7.979l-1.772-1.771L28.345%2C5.321z 
 M26.573%2C7.093l1.771%2C1.771l-1.771%2C1.772l-1.771-1.772L26.573%2C7.093z M25.688%2C6.208 l-1.771%2C1.771L23.03%2C7.093l1.771-1.772L25.688%2C6.208z M21.258%2C7.093l-0.886-0.886l3.543-3.543l0.887%2C0.886L21.258%2C7.093z M23.915%2C9.75l1.772%2C1.772l-0.886%2C0.886l-1.772-1.772L23.915%2C9.75z M23.915%2C15.065l-3.543-3.543l0.886-0.886l3.543%2C3.544 L23.915%2C15.065z M26.573%2C17.723l-1.771-1.771l1.771-1.771l-0.886-0.886l0.886-0.886l0.886%2C0.886l-0.886%2C0.886l1.771%2C1.771 L26.573%2C17.723z M31.888%2C10.636l0.886%2C0.886l-3.543%2C3.543l-0.886-0.886L31.888%2C10.636z M30.116%2C17.723l-0.886-0.886l5.315-5.315 l0.886%2C0.886L30.116%2C17.723z 
 M17.715%2C12.408L17.715%2C12.408L17.715%2C12.408L17.715%2C12.408z M19.486%2C0.007v1.771h-1.771v3.543 l5.314-5.315H19.486z%22%2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M12.399%2C17.723L12.399%2C17.723L12.399%2C17.723L12.399%2C17.723z M5.313%2C17.723L5.313%2C17.723L5.313%2C17.723 L5.313%2C17.723z M15.942%2C19.494v-1.771H12.4l5.314%2C5.314l-0.886%2C0.886l-5.315-5.314l0.886-0.886H8.856l1.771%2C1.771l-1.771%2C1.771 l0.886%2C0.886l-0.886%2C0.887l-0.886-0.887l0.886-0.886l-1.771-1.771l1.771-1.771H5.313l0.886%2C0.886l-5.315%2C5.314l-0.886-0.886v3.544 l1.772-1.772l1.771%2C1.772l0.886-0.887l0.886%2C0.887l-0.886%2C0.885l-0.886-0.885l-1.771%2C1.771l-1.772-1.771v3.542l0.886-0.886 l5.315%2C5.315l-0.886%2C0.886l-5.315-5.314v3.543h1.772v1.771h14.172v-1.771h1.772V19.494H15.942z 
 M17.715%2C26.582l-1.772%2C1.771 l-1.771-1.771l-0.886%2C0.885l-0.886-0.885l0.886-0.887l0.886%2C0.887l1.771-1.772L17.715%2C26.582z M12.399%2C28.353l-1.771%2C1.772 l-0.886-0.887l1.771-1.771L12.399%2C28.353z M11.514%2C20.381l3.543%2C3.543l-0.886%2C0.886l-3.543-3.544L11.514%2C20.381z M10.628%2C23.038 l1.771%2C1.771l-0.886%2C0.886l-1.771-1.771L10.628%2C23.038z M8.856%2C24.811l1.771%2C1.771l-1.771%2C1.771l-1.771-1.771L8.856%2C24.811z M7.971%2C23.924l-1.771%2C1.771L5.313%2C24.81l1.771-1.771L7.971%2C23.924z M3.542%2C24.81l-0.886-0.886l3.543-3.543l0.886%2C0.886 L3.542%2C24.81z 
 M6.199%2C27.467l1.771%2C1.771l-0.886%2C0.887l-1.771-1.772L6.199%2C27.467z M6.199%2C32.781l-3.544-3.543l0.887-0.886 l3.543%2C3.544L6.199%2C32.781z M8.856%2C35.439l-1.771-1.771l1.771-1.771L7.971%2C31.01l0.886-0.885l0.886%2C0.885l-0.886%2C0.887l1.771%2C1.771 L8.856%2C35.439z M14.171%2C28.353l0.886%2C0.886l-3.543%2C3.543l-0.886-0.885L14.171%2C28.353z M12.399%2C35.439l-0.886-0.886l5.315-5.315 l0.886%2C0.886L12.399%2C35.439z M-0.002%2C30.124L-0.002%2C30.124L-0.002%2C30.124L-0.002%2C30.124z M1.771%2C17.724v1.771h-1.772v3.543 l5.315-5.314H1.771z%22%2F%3E %3Cpath fill=%22%2390C9D6%22 d=%22M30.116%2C17.723L30.116%2C17.723L30.116%2C17.723L30.116%2C17.723z M23.03%2C17.723L23.03%2C17.723L23.03%2C17.723 L23.03%2C17.723z M33.659%2C19.494v-1.771h-3.543l5.314%2C5.315l-0.886%2C0.886l-5.314-5.315l0.885-0.885h-3.542l1.771%2C1.772l-1.771%2C1.771 l0.886%2C0.886l-0.886%2C0.886l-0.886-0.886l0.886-0.886l-1.771-1.771l1.771-1.772H23.03l0.886%2C0.886l-5.315%2C5.314l-0.886-0.886v3.543 l1.771-1.771l1.771%2C1.772l0.886-0.887l0.887%2C0.887l-0.887%2C0.885l-0.886-0.885l-1.771%2C1.771l-1.771-1.772v3.543l0.886-0.886 l5.314%2C5.315l-0.886%2C0.886l-5.314-5.314v3.543h1.771v1.771h14.173v-1.771h1.772V19.494H33.659z 
 M35.431%2C26.581l-1.771%2C1.772 l-1.771-1.772l-0.886%2C0.886l-0.886-0.886l0.886-0.886l0.886%2C0.886l1.771-1.771L35.431%2C26.581z M30.116%2C28.353l-1.771%2C1.771 l-0.886-0.886l1.771-1.771L30.116%2C28.353z M29.23%2C20.381l3.543%2C3.543l-0.886%2C0.886l-3.543-3.544L29.23%2C20.381z M28.345%2C23.037 l1.771%2C1.772l-0.886%2C0.886l-1.772-1.771L28.345%2C23.037z M26.573%2C24.81l1.771%2C1.772l-1.771%2C1.771l-1.771-1.771L26.573%2C24.81z M25.688%2C23.924l-1.771%2C1.771L23.03%2C24.81l1.771-1.771L25.688%2C23.924z M21.258%2C24.81l-0.886-0.886l3.543-3.543l0.887%2C0.886 L21.258%2C24.81z M23.915%2C27.467l1.772%2C1.771l-0.886%2C0.886l-1.772-1.771L23.915%2C27.467z M23.915%2C32.781l-3.543-3.543l0.886-0.886 l3.543%2C3.544L23.915%2C32.781z 
 M26.573%2C35.439l-1.771-1.771l1.771-1.771l-0.886-0.887l0.886-0.886l0.886%2C0.886l-0.886%2C0.887 l1.771%2C1.771L26.573%2C35.439z M31.888%2C28.353l0.886%2C0.886l-3.543%2C3.543l-0.886-0.885L31.888%2C28.353z M30.116%2C35.439l-0.886-0.886 l5.315-5.315l0.886%2C0.886L30.116%2C35.439z M17.715%2C30.124L17.715%2C30.124L17.715%2C30.124L17.715%2C30.124z M19.486%2C17.723v1.771h-1.771 v3.544l5.314-5.315H19.486z%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
}

サンプル(12)

sample12

サンプル(12)CSSソース

.sample12 {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%2213px%22 height=%2213px%22 viewBox=%220 0 13 13%22%3E %3Cpolygon fill=%22%239BDB83%22 points=%2213%2C12.986 11%2C12.986 11%2C1.986 0%2C1.986 0%2C-0.014 13%2C-0.014 13%2C12.986 %22%2F%3E %3Cpolygon 
  fill=%22%239BDB83%22 points=%229%2C12.986 7%2C12.986 7%2C5.986 0%2C5.986 0%2C3.986 9%2C3.986 9%2C12.986 %22%2F%3E %3Cpolygon fill=%22%239BDB83%22 points=%225%2C12.986 3%2C12.986 3%2C9.986 0%2C9.986 0%2C7.986 5%2C7.986 5%2C12.986 %22%2F%3E %3C%2Fsvg%3E");
	}

サンプル(13)

sample13

サンプル(13)CSSソース

.sample13 {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 
  width=%2222.5px%22 height=%2222.5px%22 viewBox=%220 0 22.5 22.5%22%3E %3Crect x=%22-0.001%22 y=%220.008%22 fill=%22%23A7B7C9%22 width=%2222.5%22 height=%2222.5%22%2F%3E %3Cpath fill=%22%23D2FFFF%22 
  d=%22M12.562%2C22.51H9.919c-2.035-0.578-3.529-2.445-3.529-4.66v-0.555H5.2v-1.189H4.645 c-2.195%2C0-4.051-1.465-4.648-3.467V9.875C0.593%2C7.874%2C2.45%2C6.408%2C4.645%2C6.408H5.2V5.22h1.19V4.666c0-2.214%2C1.494-4.083%2C3.527-4.66 h2.647c2.033%2C0.577%2C3.527%2C2.446%2C3.527%2C4.66V5.22h1.189v1.188h0.555c2.217%2C0%2C4.086%2C1.495%2C4.664%2C3.526v2.646 c-0.578%2C2.031-2.447%2C3.525-4.664%2C3.525h-0.555v1.189h-1.189v0.555C16.092%2C20.064%2C14.598%2C21.932%2C12.562%2C22.51 
  M14.982%2C17.85v-1.664 h1.189v-1.189h1.664c2.064%2C0%2C3.742-1.677%2C3.742-3.739S19.9%2C7.518%2C17.836%2C7.518h-1.664V6.33h-1.189V4.666 c0-2.062-1.678-3.74-3.742-3.74c-2.063%2C0-3.742%2C1.678-3.742%2C3.74V6.33H6.31v1.188H4.645c-2.063%2C0-3.741%2C1.677-3.741%2C3.739 s1.678%2C3.739%2C3.741%2C3.739H6.31v1.189h1.189v1.664c0%2C2.061%2C1.678%2C3.738%2C3.742%2C3.738C13.305%2C21.588%2C14.982%2C19.91%2C14.982%2C17.85%22%2F%3E %3C%2Fsvg%3E");

サンプル(14)

sample14

サンプル(14)CSSソース

.sample14 {
background: #cdcdcd url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width=%2218px%22 height=%2218px%22 viewBox=%220 0 18 18%22%3E %3Crect x=%2210%22 y=%226%22 fill=%22%23FFFFFF%22 
width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 y=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%2210%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%226%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%228%22 y=%224%22 
fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 y=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%226%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2214%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2216%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%2212%22 fill=%22%23FFFFFF%22 
width=%222%22 height=%222%22%2F%3E %3Crect x=%2210%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%226%22 y=%222%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%2212%22 fill=%22%23FFFFFF%22 
width=%222%22 height=%222%22%2F%3E %3Crect y=%2216%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect y=%228%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%224%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%222%22 fill=%22%23FFFFFF%22 
width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%2214%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3Crect x=%222%22 y=%2210%22 fill=%22%23FFFFFF%22 width=%222%22 height=%222%22%2F%3E %3C%2Fsvg%3E");

サンプル(15)

sample15

サンプル(15)CSSソース

.sample15 {
	background-image:url(csstest/img3/pattern015.svg); 
	}

サンプル(16)

sample16

サンプル(16)CSSソース

.sample16 {
	background-image:url(csstest/img3/pattern015.svg); 
	background-size:4%;
	}

サンプル(17)

sample17

サンプル(17)CSSソース

.sample17 {
	background-image:url(csstest/img3/pattern016.svg); 
	}

サンプル(18)

sample18

サンプル(18)CSSソース

.sample18 {
	background-image:url(csstest/img3/pattern016.svg); 
	background-size:3%;
	}

サンプル(19)

sample19

サンプル(19)CSSソース

.sample19 {
	background-image:url(csstest/img3/pattern017.svg); 
  background-size:6%;
	}

サンプル(20)

sample20

サンプル(20)CSSソース

.sample20 {
	background-image:url(csstest/img3/pattern017.svg); 
  background-size:3%;
	}

サンプル(21)

sample21

サンプル(21)CSSソース

.sample21 {
	background-image:url(csstest/img3/pattern018.svg); 
	background-size:8%;
	}

サンプル(22)

sample22

サンプル(22)CSSソース

.sample22 {
	background-image:url(csstest/img3/pattern018.svg); 
	background-size:5%;
	}

サンプル(23)

sample23

サンプル(23)CSSソース

.sample23 {
	background-image:url(csstest/img3/pattern019.svg); 
	background-size:3%;
	}

サンプル(24)

sample24

サンプル(24)CSSソース

.sample24 {
	background-image:url(csstest/img3/pattern019.svg); 
  background-size:1.5%;
	}

サンプル(25)

sample25

サンプル(25)CSSソース

.sample25 {
	background-image:url(csstest/img3/pattern020.svg); 
	background-size:20%;
	}

サンプル(26)

sample26

サンプル(26)CSSソース

.sample26 {
	background-image:url(csstest/img3/pattern020.svg); 
	background-size:14%;
	}

サンプル(27)

sample27

サンプル(27)CSSソース

.sample27 {
	opacity:0.6;
 	background-image:url(csstest/img3/pattern020-2.svg); 
	background-size:18%;
	}

サンプル(28)

sample28

サンプル(28)CSSソース

.sample28 {
 	background-image:url(csstest/img3/pattern020-2.svg); 
	background-size:12%;
	}

サンプル(29)

sample29

サンプル(29)CSSソース

.sample29 {
 	background:#cfc url(csstest/img3/pattern020-white.svg); 
	background-size:12%;
	}

サンプル(30)

sample30

サンプル(30)CSSソース

.sample30 {
 	background-image:url(csstest/img3/pattern021.svg); 
	background-size:6%;
	}

サンプル(31)

sample31

サンプル(31)CSSソース

.sample31 {
 	opacity:0.4;
	background:#b43 url(csstest/img3/pattern021.svg); 
	background-size:6%;
	}

サンプル(32)

sample32

サンプル(32)CSSソース

.sample32 {
 	opacity:0.2;
	background:#000 url(csstest/img3/pattern021.svg); 
	background-size:6%;
	}

サンプル(33)

sample33

サンプル(33)CSSソース

.sample33 {
 	background-image:url(csstest/img3/pattern022.svg); 
	background-size:5%;
	}

サンプル(34)

sample34

サンプル(34)CSSソース

.sample34 {
 	background-image:url(csstest/img3/pattern022.svg); 
	background-size:3%;
	}

サンプル(35)

sample35

サンプル(35)CSSソース

.sample35 {
 	background-image:url(csstest/img3/pattern023.svg); 
	background-size:4%;
	}

サンプル(36)

sample36

サンプル(36)CSSソース

.sample36 {
 	background-image:url(csstest/img3/pattern023.svg); 
	background-size:3%;
	}

サンプル(37)

sample37

サンプル(37)CSSソース

.sample37 {
 	background-image:url(csstest/img3/pattern024.svg); 
	background-size:4%;
	}

サンプル(38)

sample38

サンプル(38)CSSソース

.sample38 {
 	background-image:url(csstest/img3/pattern024.svg); 
	background-size:3%;
	}

サンプル(39)

sample39

サンプル(39)CSSソース

.sample40 {
 	background-image:url(csstest/img3/pattern026.svg); 
	background-size:7%;
	}

サンプル(40)

sample40

サンプル(40)CSSソース

.sample40 {
 	background-image:url(csstest/img3/pattern026.svg); 
	background-size:5%;
	} 

サンプル(41)

sample41

サンプル(41)CSSソース

.sample41 {
 	background-image:url(csstest/img3/pattern027.svg); 
	background-size:5%;
	} 

サンプル(42)

sample42

サンプル(42)CSSソース

.sample42 {
 	background-image:url(csstest/img3/arrow.svg); 
	background-size:7%;
	} 

サンプル(43)

sample43

サンプル(43)CSSソース

.sample43 {
 	background:#cfc url(csstest/img3/arrow.svg); 
	background-size:4%;
	} 

サンプル(44)

sample44

サンプル(44)CSSソース

.sample44 {
 	background:#cfc url(csstest/img3/arrow2.svg); 
	background-size:8%;
	} 

サンプル(45)

sample45

サンプル(45)CSSソース

.sample45 {
 	background-image:url(csstest/img3/arrow2.svg); 
	background-size:5%;
	} 

サンプル(46)

sample46

サンプル(46)CSSソース

.sample46 {
 	background-image:url(csstest/img3/pattern030.svg); 
	background-size:3%;
	} 

サンプル(47)

sample47

サンプル(47)CSSソース

.sample47 {
 	background-image:url(csstest/img3/pattern32.svg); 
	background-size:4%;
	}

サンプル(48)

sample48

サンプル(48)CSSソース

.sample48 {
 	background-image:url(csstest/img3/pattern32.svg); 
	background-size:2%;
	}

サンプル(49)

sample49

サンプル(49)CSSソース

.sample49 {
 	background-image:url(csstest/img3/pattern33.svg); 
	background-size:4%;
	}

サンプル(50)

sample50

サンプル(50)CSSソース

.sample50 {
 	background-image:url(csstest/img3/pattern33.svg); 
	background-size:2%;
	}

サンプル(51)

sample51

サンプル(51)CSSソース

.sample51 {
 	background-image:url(csstest/img3/pattern34.svg); 
	background-size:6%;
	}

サンプル(52)

sample52

サンプル(52)CSSソース

.sample52 {
 	background-image:url(csstest/img3/pattern34.svg); 
	background-size:3%;
	}

サンプル(53)

sample53

サンプル(53)CSSソース

.sample53 {
 	background-image:url(csstest/img3/asterisk3.svg); 
	background-size:4%;
	}

サンプル(54)

sample54

サンプル(54)CSSソース

.sample54 {
 	background-image:url(csstest/img3/asterisk3.svg); 
	background-size:3%;
	}

サンプル(55)

sample55

サンプル(55)CSSソース

.sample55 {
 	background-image:url(csstest/img3/asterisk4.svg); 
	background-size:5%;
	}

サンプル(56)

sample56

サンプル(56)CSSソース

.sample56 {
 	background-image:url(csstest/img3/asterisk4.svg); 
	background-size:4%;
	}

サンプル(57)

sample57

サンプル(57)CSSソース

.sample57 {
 	background-image:url(csstest/img3/asterisk5.svg); 
	background-size:5%;
	}

サンプル(58)

sample58

サンプル(58)CSSソース

.sample58 {
 	background-image:url(csstest/img3/asterisk5.svg); 
	background-size:3%;
	}

サンプル(59)

sample59

サンプル(59)CSSソース

.sample59 {
 	background:#adc url(csstest/img3/asterisk4.svg); 
	background-size:3%;
	}

サンプル(60)

sample60

サンプル(60)CSSソース

.sample60 {
 	background:#adc url(csstest/img3/asterisk4.svg); 
	background-size:2%;
	}

サンプル(61)

sample61

サンプル(61)CSSソース

.sample61 {
 	background-image:url(csstest/img3/kaku.svg); 
	background-size:6%;
	}

サンプル(62)

sample62

サンプル(62)CSSソース

.sample62 {
 	background:#ccc url(csstest/img3/kaku.svg); 
	background-size:6%;
	}

サンプル(63)

sample63

サンプル(63)CSSソース

.sample63 {
 	background:#fff url(csstest/img3/pat35x35-gray.svg); 
	background-size:6%;
	}

サンプル(64)

sample64

サンプル(64)CSSソース

.sample64 {
 	background:#fff url(csstest/img3/pat35x35-gray.svg); 
	background-size:10%;
	}

サンプル(65)

sample65

サンプル(65)CSSソース

.sample65 {
 	background:#8f8 url(csstest/img3/pat35x35-white.svg); 
	background-size:8%;
	}

サンプル(66)

sample66

サンプル(66)CSSソース

.sample66 {
 	background:#9df url(csstest/img3/pat35x35-white.svg); 
	background-size:12%;
	}

サンプル(67)

sample67

サンプル(67)CSSソース

.sample67 {
 	background: url(csstest/img3/pat35x35-bgray.svg); 
	background-size:4%;
	}

サンプル(68)

sample68

サンプル(68)CSSソース

.sample68 {
 	background: url(csstest/img3/pat35x35-bgray.svg); 
	background-size:3%;
	}

 

 

戻るボタン