Bakgrunder
Exempel på en blå bakgrund med arena-streck.
Använda som bakgrund
Man väljer själv beroende på sammanhang om man använder svg inbäddad i sidan, eller hänvisar till en svg-fil som ligger på annan plats.
Fil att ladda ner
Och här är svg-koden för samma bakgrund. När koden är inbäddad har man inga externa beroenden.
<!-- RF brand SVG – full-bleed background, decorative -->
<svg class="bg-svg" aria-hidden="true" focusable="false"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1919 1237" preserveAspectRatio="xMidYMid slice">
<defs>
<path id="a" d="M.992.136h837.681v1355.79H.992z"/>
<path id="c" d="M1.774 1.304h368.062v462.03H1.774z"/>
<path id="e" d="M1.774 1.462h407.039v458.185H1.774z"/>
<path id="g" d="M1.774.845h431.318v992.592H1.774z"/>
<path id="i" d="M1.774.603H487.07V1002.95H1.774z"/>
<path id="k" d="M1.774 1.205h1138.862v500.35H1.774z"/>
</defs>
<rect width="1919" height="1237" fill="#006bb1"/>
<g fill="none" fill-rule="evenodd" opacity=".8">
<g transform="translate(1079.573 -87.52)">
<mask id="b" fill="#fff"><use xlink:href="#a"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M140.573 135.487C140.573 58.375 78.081-4.138.992-4.138m233.492 139.625C234.484 6.492 129.946-98.08.992-98.08m327.4 233.568c0-180.874-146.583-327.502-327.4-327.502m421.304 327.502c0-232.752-188.622-421.436-421.304-421.436m515.213 421.436c0-284.633-230.67-515.373-515.213-515.373m609.12 515.373C610.112-201.025 337.4-473.82.992-473.82m703.025 609.307c0-388.39-314.757-703.244-703.025-703.244M843.635 523.17c-77.09 0-139.584 62.513-139.584 139.625m139.584-233.566c-128.957 0-233.496 104.57-233.496 233.566m233.496-327.502c-180.82 0-327.402 146.628-327.402 327.502m327.402-421.437c-232.685 0-421.307 188.684-421.307 421.437m421.307-515.37c-284.545 0-515.214 230.738-515.214 515.37M843.635 53.488c-336.41 0-609.12 272.797-609.12 609.307m609.12-703.242c-388.27 0-703.028 314.853-703.028 703.242m563.437-527.349v1264.74m-93.955-1264.74v1265.777M516.137 135.446v1264.74m-93.955-1264.74v1265.777M328.227 135.446v1264.74M234.273 121.355v1279.868M140.318 135.446v1265.777m563.437-735.766H140.318M694.362 886.93h-74.531m-19.374 0h-74.536m-93.902 0h74.532m-168.441 0h74.536m-168.44 0h74.533m-168.44 0h74.533" mask="url(#b)"/>
</g>
<path stroke="#FFF" stroke-width=".5" d="M484.017 152.947v1001.8m.08.107c276.512 0 500.669-224.06 500.669-500.448 0-276.391-224.157-500.448-500.67-500.448m0 0c-8.718 0-17.382.223-25.991.663"/>
<g transform="translate(-1 165.57)">
<mask id="d" fill="#fff"><use xlink:href="#c"/></mask>
<path stroke="#FFF" stroke-dasharray="11.105,11.105" stroke-width=".5" d="M369.836 1.304C156.789 51.536-3.724 237.79-14.945 463.334" mask="url(#d)"/>
</g>
<g transform="translate(-1 689.413)">
<mask id="f" fill="#fff"><use xlink:href="#e"/></mask>
<path stroke="#FFF" stroke-dasharray="10.749,10.749" stroke-width=".5" d="M-14.248 1.462c16.943 233.875 194.58 423.21 423.06 458.185" mask="url(#f)"/>
</g>
<g transform="translate(-1 158.737)">
<mask id="h" fill="#fff"><use xlink:href="#g"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M407.057.845c-4.173.653-8.33 1.36-12.468 2.115M-15.416 482.803a518.625 518.625 0 0 0-.01 24.885M420.933 992.03c4.038.515 8.092.984 12.16 1.408" mask="url(#h)"/>
</g>
<g transform="translate(-1 151.904)">
<mask id="j" fill="#fff"><use xlink:href="#i"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M459.137 1002.287c8.598.44 17.253.663 25.96.663M485.017.603h-1017.43M487.069 1002.845H-530.362" mask="url(#j)"/>
</g>
<g transform="translate(-1 766.85)">
<mask id="l" fill="#fff"><use xlink:href="#k"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M1140.636 31.435H-553.453m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.913h-1694.09m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.91h-1694.09m1694.09-30.23v60.46m0 148.911h-1694.09m1694.09-30.23v60.461m0 148.911h-1694.09m1694.09-30.23v60.46" mask="url(#l)"/>
</g>
</g>
</svg>