<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

      <defs>
        <filter id="filter" filterUnits="userSpaceOnUse">
          <!-- COLORS -->
            <feFlood flood-color="#663300" result="COLOR-red"></feFlood>‚
            <feFlood flood-color="#D7A500" result="COLOR-y"></feFlood>
          <!-- COLORS END -->

          <!-- STRIPE FILL -->
              <feImage xlink:href="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Untitled-Seite_x25_201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2210px%22%20height%3D%224px%22%3E%0A%3Crect%20fill%3D%22%239F6B00%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E" x="0" y="0" width="10" height="4" result="STRIPE FILL_10"></feImage>
            <feTile in="STRIPE FILL_10" result="STRIPE FILL_20"></feTile>
            <feComposite operator="in" in="STRIPE FILL_20" in2="SourceAlpha" result="STRIPE FILL_30"></feComposite>
          <!-- STRIPE FILL END -->

          <!-- THIN BEVEL -->
            <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="THIN-BEVEL_10"></feMorphology>
            <feComposite operator="out" in="THIN-BEVEL_10" in2="SourceAlpha" result="THIN-BEVEL_20"></feComposite>
            <feComposite operator="in" in="COLOR-y" in2="THIN-BEVEL_20" result="THIN-BEVEL_30"></feComposite>
          <!-- THIN BEVEL END -->

          <!-- OUTER 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="SourceGraphic" result="OUTER-BEVEL_10"></feConvolveMatrix>
            <feOffset dx="4" dy="4" in="OUTER-BEVEL_10" result="OUTER-BEVEL_20"></feOffset>
            <feComposite operator="in" in="COLOR-red" in2="OUTER-BEVEL_20" result="OUTER-BEVEL_30"></feComposite>
           <!-- OUTER BEVEL END -->

          <!-- INNER BEVEL -->
            <feOffset in="SourceAlpha" dx="4" dy="4" result="INNER-BEVEL_10"></feOffset>
            <feComposite operator="out" in="SourceAlpha" in2="INNER-BEVEL_10" result="INNER-BEVEL_20"></feComposite>
            <feComposite in="COLOR-red" operator="in" in2="INNER-BEVEL_20" result="INNER-BEVEL_30"></feComposite>
          <!--  INNER BEVEL END -->

          <!-- FAT OUTLINE -->
            <feMorphology operator="dilate" radius="6" in="OUTER-BEVEL_30" result="FAT-OUTLINE_10"></feMorphology>
            <feComposite operator="in" in="COLOR-y" in2="FAT-OUTLINE_10" result="FAT-OUTLINE_20"></feComposite>
          <!-- FAT OUTLINE END -->

            <feMerge result="merge2">
              <feMergeNode in="FAT-OUTLINE_20"></feMergeNode>
              <feMergeNode in="OUTER-BEVEL_30"></feMergeNode>
              <feMergeNode in="STRIPE FILL_30"></feMergeNode>
              <feMergeNode in="INNER-BEVEL_30"></feMergeNode>
              <feMergeNode in="THIN-BEVEL_30"></feMergeNode>
            </feMerge>
          </filter>
      </defs>

      <text class="filtered" x="60" y="140">Pansen!<text>

    </text></text></svg>

@import "https://fonts.googleapis.com/css?family=Oleo+Script:400,700";
$bg-path: "https://www.w3cplus.com/sites/default/files/blogs/2015/1506/" !default;

html,
body{
  height: 100vh;
}
body{
  background:#A82B12 url(#{$bg-path}meat_l.jpg) no-repeat center fixed;
  background-size: cover;
}
svg{
  display: block;
  position: absolute;
  width: 590px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-size: cover;
 }

 .filtered{
   filter: url(#filter);
   color: #D7A500;
   fill: #D7A500;
   font-family: 'Oleo Script', cursive;
   font-size: 140px;
}