<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="l--wrapper"> <svg> <pattern id="pt--water" viewBox="0 0 256 256" width="256" height="256" patternUnits="userSpaceOnUse"> <image xlink:href="https://img-fotki.yandex.ru/get/9931/5091629.a0/0_835bb_35485e4a_XL" width="256" height="256"/> </pattern> <pattern id="pt--fire" viewBox="30 100 186 200" width="216" height="200" patternUnits="userSpaceOnUse" x="-60" y="-100"> <image xlink:href="https://img-fotki.yandex.ru/get/9742/5091629.a0/0_835bc_b77f8d28_orig" width="256" height="300"/> </pattern> <text x="50%" y="155" class="t--water" text-anchor="middle">Water</text> <text x="50%" y="280" class="t--and" text-anchor="middle">&</text> <text x="50%" y="470" class="t--fire" text-anchor="middle">Fire</text> <!-- <rect width="400" height="400"></rect> --> </svg> </div>

@import url(https://fonts.googleapis.com/css?family=Francois+One); BODY { background: #000; } .l--wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 485px; height: 540px; } svg { width: 485px; height: 540px; /* border: 1px solid red; */ } text { stroke-width: 10; stroke-opacity: .5; font-family: 'Francois One', sans-serif; font-size: 12em; } .t--water { fill: url(#pt--water); stroke: #004384; } .t--fire { fill: url(#pt--fire); stroke: #4d0000; } .t--and { fill: none; stroke-width: 5; stroke: #3a434d; font-size: 7em; } rect { fill: url(#pt--fire); stroke: #4d0000; }