search

marionebl / svg-term-cli

Share terminal sessions via SVG and CSS
MIT License
3.48k stars 116 forks source link

Adding drop shadow under the window #69

Open mickael-menu opened 3 years ago

mickael-menu commented 3 years ago

Hi,

First of all, thanks for this very useful tool!

I tried to add some drop shadow under the window, and got a pretty nice result. However, some characters are a bit out of offset and messy, as illustrated in this screenshot:

Screenshot 2021-02-28 at 13 35 16

I guess character offsets need to be adjusted for the drop shadow, and I'm not sure it's something that can be done easily just by messing with the SVG? In any case, it would be a nice option to have in svg-term.

Here's what I did to get this drop-shadow. Note the addition of viewBox in <svg>, the <defs> node and filter="url(#dropshadow)" on the first <rect>.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="840" height="602.75"  viewBox="-70 -40 980 702.75">
<defs>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="20"/> 
    <feOffset dx="2" dy="12" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.9"/>
    </feComponentTransfer>
    <feMerge> 
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/> 
    </feMerge>
  </filter>
</defs>
<rect width="840" height="602.75" rx="5" ry="5" class="a" filter="url(#dropshadow)" />
...

Any pointer would be much appreciated!

mickael-menu commented 3 years ago

I managed to make it work using a nested <svg>. You can see the results here.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-70 -40 980 702.75">
<defs>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="20"/> 
    <feOffset dx="2" dy="12" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.9"/>
    </feComponentTransfer>
    <feMerge> 
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/> 
    </feMerge>
  </filter>
</defs>
  <g filter="url(#dropshadow)">
    <svg> <!-- generated by svg-term -->
    ...
    </svg>
  </g>
</svg>

However, Chrome performance is poor and I get a white canvas on Safari. With Firefox the performances are great though! My screencast is quite long, so that could play a role.