Loading

Selectable text with animated backgrounds

SVG + CSS + GIFToo heavy backgrounds : (

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Selectable text with animated backgrounds</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="l--wrapper">
  <svg>
    <pattern id="pt--water" viewBox="0 0 256 256"
         width="256" height="256" patternUnits="userSpaceOnUse">
      <image xlink:href="http://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="http://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>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
@import url(http://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;
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by yoksel, you can se more from this user in the personal repository

yoksel
yoksel
yoksel
Rating 4.50 average based on 0 ratings.
2 Downloads
53 Views
4.50 Rating
PREVIEW Open demo in external page
Download File Size: 2.39 KB
Open Original Open on codepen.io