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

      <defs>
        <filter id="filter">
          <!-- COLOR -->
          <feFlood flood-color="#73DCFF" flood-opacity="0.75" result="COLOR-blu"></feFlood>
          <feFlood flood-color="#9673FF" flood-opacity="0.4" result="COLOR-red"></feFlood>
          <!-- COLOR END -->

          <!-- Texture -->
          <feTurbulence baseFrequency=".05" type="fractalNoise" numOctaves="3" seed="0" result="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 -2.1 1.1" in="Texture_10" result="Texture_20"></feColorMatrix>

          <feColorMatrix result="Texture_30" type="matrix" values="0 0 0 0 0,
          0 0 0 0 0,
          0 0 0 0 0,
          0 0 0 -1.7 1.8" in="Texture_10"></feColorMatrix>
          <!-- Texture -->

          <!-- FILL -->
          <feOffset dx="-3" dy="4" in="SourceAlpha" result="FILL_10"></feOffset>
          <feDisplacementMap scale="17" in="FILL_10" in2="Texture_10" result="FILL_20"></feDisplacementMap>
          <feComposite operator="in" in="Texture_30" in2="FILL_20" result="FILL_40"></feComposite>
          <feComposite operator="in" in="COLOR-blu" in2="FILL_40" result="FILL_50"></feComposite>
          <!-- FILL END-->

          <!-- OUTLINE -->
          <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="OUTLINE_10"></feMorphology>
          <feComposite operator="out" in="OUTLINE_10" in2="SourceAlpha" result="OUTLINE_20"></feComposite>
          <feDisplacementMap scale="7" in="OUTLINE_20" in2="Texture_10" result="OUTLINE_30"></feDisplacementMap>
          <feComposite operator="arithmetic" k2="-1" k3="1" in="Texture_20" in2="OUTLINE_30" result="OUTLINE_40"></feComposite>
          <!-- OUTLINE END-->

          <!-- BEVEL OUTLINE -->
          <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="SourceAlpha" result="BEVEL_10"></feConvolveMatrix>
          <feMorphology operator="dilate" radius="2" in="BEVEL_10" result="BEVEL_20"></feMorphology>
          <feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"></feComposite>
          <feDisplacementMap scale="7" in="BEVEL_30" in2="Texture_10" result="BEVEL_40"></feDisplacementMap>
          <feComposite operator="arithmetic" k2="-1" k3="1" in="Texture_20" in2="BEVEL_40" result="BEVEL_50"></feComposite>
          <feOffset dx="-7" dy="-7" in="BEVEL_50" result="BEVEL_60"></feOffset>
          <feComposite operator="out" in="BEVEL_60" in2="OUTLINE_10" result="BEVEL_70"></feComposite>
          <!-- BEVEL OUTLINE END -->

          <!-- BEVEL FILL -->
          <feOffset dx="-9" dy="-9" in="BEVEL_10" result="BEVEL-FILL_10"></feOffset>
          <feComposite operator="out" in="BEVEL-FILL_10" in2="OUTLINE_10" result="BEVEL-FILL_20"></feComposite>
          <feDisplacementMap scale="17" in="BEVEL-FILL_20" in2="Texture_10" result="BEVEL-FILL_30"></feDisplacementMap>
          <feComposite operator="in" in="COLOR-red" in2="BEVEL-FILL_30" result="BEVEL-FILL_50"></feComposite> <!-- -->
          <!-- BEVEL FILL END-->

          <feMerge result="merge2">
           <feMergeNode in="BEVEL-FILL_50"></feMergeNode>
           <feMergeNode in="BEVEL_70"></feMergeNode>
           <feMergeNode in="FILL_50"></feMergeNode>
            <feMergeNode in="OUTLINE_40"></feMergeNode>
          </feMerge>
        </filter>
      </defs>

      <text class="filtered" x="20" y="140">Scratch!</text>
    </svg>

@import "https://fonts.googleapis.com/css?family=Alfa+Slab+One";

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

html,
body{
  height: 100vh;
}
body{
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%,rgba(140,114,93,0.7) 100%),#FFECDF url(#{$bg-path}paper.jpg);
  background-size: cover;
  background-attachment: fixed;
 }
svg{
  display: block;
  position: absolute;
  width: 550px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-size: cover;
}

.filtered{
  filter: url(#filter);
  fill: #9673FF;
  color: #9673FF;
  font-family: 'Alfa Slab One', cursive;
  text-transform: uppercase;
  font-size: 90px;
}