I want to create a faux extrusion effect by stacking multiple feOffset in my filter.

Is this possible?

Something like:

<svg height="150" width="150" xmlns="">
  <defs>
    <filter id="f1" width="120" height="120">
      <feOffset in="SourceAlpha" dx="10" dy="10" />
      <feBlend in="SourceGraphic" in2="offOut" />
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

I want to create a faux extrusion effect by stacking multiple feOffset in my filter.

Is this possible?

Something like:

<svg height="150" width="150" xmlns="http://www.w3./2000/svg">
  <defs>
    <filter id="f1" width="120" height="120">
      <feOffset in="SourceAlpha" dx="10" dy="10" />
      <feBlend in="SourceGraphic" in2="offOut" />
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

• svg
• svg-filters

Share Improve this question Follow asked Mar 26 at 3:19 user500665user500665 1,38011 gold badge1313 silver badges4545 bronze badges 2

• 1 Yes it's possible - multiple ways of doing it. The most straightforward is to do multiple offsets, label each one with a result and then use a feMerge to condense them. The code that you have won't retain the result of the first offset, it will be discarded. I wrote a tool for text effects that include extrusion - have a look: codepen.io/mullany/pen/qOqxpG – Michael Mullany Commented Mar 26 at 20:52
• @MichaelMullany Yes feMerge is what I was after. Maybe add that as an answer? – user500665 Commented Mar 27 at 20:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes it's possible - multiple ways of doing it. The most straightforward is to do multiple offsets, label each one with a result and then use a feMerge to condense them. (The code that you have won't retain the result of the first offset, it will be discarded. You have to label something with a result= if you want to use it as an input to anything other than the next primitive.)

<svg height="150" width="150" xmlns="http://www.w3./2000/svg">
  <defs>
    <filter id="f1" width="120" height="120">
      <feOffset in="SourceAlpha" dx="10" dy="10" result="off1" />
      <feOffset dx="10" dy="10" result="off2"/>
      <feOffset dx="10" dy="10" result="off3"/>
      <feMerge>
          <feMergeNode in="SourceGraphic"/>   
          <feMergeNode in="off1"/>
          <feMergeNode in="off2"/>
          <feMergeNode in="off3"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>