<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460 220" preserveAspectRatio="xMidYMid keep">

    <defs>
      <filter id="filter">
        <!-- COLORS -->
          <feFlood flood-color="#582D1B" result="COLOR-red"></feFlood>
        <!-- COLORS END -->

        <!-- FRACTAL TEXTURE -->
          <feTurbulence baseFrequency=".05,.004" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10"></feTurbulence>
          <feColorMatrix type="matrix" values="0 0 0 0 0,
          0 0 0 0 0,
          0 0 0 0 0,
          0 0 0 -1.2 1.1" in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20"></feColorMatrix>
        <!-- FRACTAL TEXTURE END -->

        <!-- STROKE -->
          <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="STROKE_10"></feMorphology>
        <!-- STROKE END -->

        <!-- EXTRUDED BEVEL -->
         <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="STROKE_10" result="BEVEL_20"></feConvolveMatrix>

          <feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_25"></feOffset>
          <feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30"></feComposite>
          <feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40"></feComposite>
          <feMerge result="BEVEL_50">
            <feMergeNode in="BEVEL_40"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
         <!-- EXTRUDED BEVEL END -->

        <feComposite in2="FRACTAL-TEXTURE_20" in="BEVEL_50" operator="in"></feComposite>
      </filter>
    </defs>

    <g class="filtered">
      <text x="0" y="200" transform="rotate(-12)">Petrol</text>
    </g>
  </svg>
@import "https://fonts.googleapis.com/css?family=Racing+Sans+One";

$bg-path: "https://www.w3cplus.com/sites/default/files/blogs/2015/1506/" !default;

html,
body{
  height: 100vh;
  width: 100vw;
}
 body{
  background: silver url(#{$bg-path}concrete_l.jpg) no-repeat center fixed;
  background-size: cover;
  overflow: hidden;
}
svg{
  display: block;
  position: absolute;
  min-width: 460px;
  width: 70vw;
  height: 70vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-size: cover;
}
.filtered{
  filter: url(#filter);
  color: white;
  font-family: 'Racing Sans One', cursive;
  fill: #2B3F0E;
  font-size: 140px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.