1

I make a simple SVG Icon, but I cannot figure out how to create an inset shadow.

Is it some way to make it?

svg {
  filter: drop-shadow(.1px 1.5px .1px rgba(0,0,0,0.5));
}
<!DOCTYPE html>
<html>
<body>

<svg width="124" height="124" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="transparent" stroke="white" stroke-width="1">
	<path  d="M15.668 8.626l8.332 1.159-6.065 5.874 1.48 8.341-7.416-3.997-7.416 3.997 1.481-8.341-6.064-5.874 8.331-1.159 3.668-7.626 3.669 7.626zm-6.67.925l-6.818.948 4.963 4.807-1.212 6.825 6.068-3.271 6.069 3.271-1.212-6.826 4.964-4.806-6.819-.948-3.002-6.241-3.001 6.241z"/>
    
</svg>
 
</body>
</html>

The final result should be as this one: enter image description here

Improve this question
7
  • What is a "star/t board"?
    – Paulie_D
    Commented Nov 27, 2018 at 15:37
  • Oh, sorry. I mean borders. The boarders of the start. @Paulie_D
    – Max Travis
    Commented Nov 27, 2018 at 15:40
  • @Paulie_D sure, I have added the picture of what is should to be in the result
    – Max Travis
    Commented Nov 27, 2018 at 15:46
  • 1
    xanthir.com/b4Yv0
    – Paulie_D
    Commented Nov 27, 2018 at 15:47
  • I think you cannot do the inset shadow as your star is not a solid shape therefore drop shadow will be put on both sides of the line
    – Pete
    Commented Nov 27, 2018 at 15:50

2 Answers 2

Reset to default
4

It looks like you are creating a shape that is the outline of the a star rather than the whole shape being a star. 

<!DOCTYPE html>
<html>
<body>

<svg width="260" height="245" xmlns="http://www.w3.org/2000/svg" fill="rgb(240, 240, 240)" stroke="transparent" stroke-width="1">
   <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
    <feComponentTransfer in=SourceAlpha>
      <feFuncA type="table" tableValues="1 0" />
    </feComponentTransfer>
    <feGaussianBlur stdDeviation="1"/>
    <feOffset dx="0" dy="2" result="offsetblur"/>
    <feFlood flood-color="rgb(20, 0, 0)" result="color"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feComposite in2="SourceAlpha" operator="in" />
    <feMerge>
      <feMergeNode in="SourceGraphic" />
      <feMergeNode />
    </feMerge>
  </filter>
	<path filter="url(#inset-shadow)" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
    
</svg>
 
</body>
</html>

Paulie_D had some good resources. I used that and modified it a bit to get you closer to your example image.

Edit: Op mentioned in comments that they would prefer a transparent fill. Source. This is different from Sviat Kuzhelev's answer as this uses one contiguous path for the shape rather than creating multiple disjointed lines.

<html>

<body>
  <svg>
  <defs>
    <filter id="inset-shadow" width="200%" height="200%">
      <!-- Shadow Offset -->
      <feOffset dx="0" dy="1" />
      <!-- Shadow Blur -->
      <feGaussianBlur stdDeviation="1"  result="offset-blur" />
      <!-- Invert the drop shadow to create an inner shadow -->
      <feComposite operator="out" in="SourceGraphic" result="inverse" />
      <!-- Color & Opacity -->
      <feFlood flood-color="black" flood-opacity=".75" result="color" />
      <!-- Clip color inside shadow -->
      <feComposite operator="in" in="color" in2="inverse" result="shadow" />
      <!-- Shadow Opacity -->
      <feComponentTransfer in="shadow" result="shadow">
        <feFuncA type="linear" slope="1" />
      </feComponentTransfer>
      <!-- Put shadow over original object -->
      <!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>-->
    </filter>
  </defs>
  <path filter="url(#inset-shadow)" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
</svg>
</body>

</html>

Improve this answer
3
  • Awesome! Thank you, but I need the same svg with the fill and stroke rules as in the question: fill="transparent" stroke="transparent". In your propose you set fill='rgb(240, 240, 240)'. This is not what is need in my particular case. :(
    – Max Travis
    Commented Nov 27, 2018 at 16:26
  • Ah. That's going to be a bit more complicated as the filter is being applied to the fill. Could you update your question to include the transparent bit? Technically, this answers the question without that caveat.
    – Nathan
    Commented Nov 27, 2018 at 16:49
  • Just kidding. I found an example that uses a transparent fill and stroke.
    – Nathan
    Commented Nov 27, 2018 at 16:58
2

It's not a perfect solution, but in your case it can help. See my example below:

<!DOCTYPE html>
<html>
<body>

<svg width="26" height="30" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="transparent" stroke="white" stroke-width="1">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="1" stdDeviation=".3"/>
    </filter>
  </defs>

	<path style="fill:transparent; filter:url(#shadow);" filter="drop-shadow(.1px 1.5px .1px rgba(0,0,0,0.5))" d="M15.668 8.626l8.332 1.159-6.065 5.874 1.48 8.341-7.416-3.997-7.416 3.997 1.481-8.341-6.064-5.874 8.331-1.159 3.668-7.626 3.669 7.626zm-6.67.925l-6.818.948 4.963 4.807-1.212 6.825 6.068-3.271 6.069 3.271-1.212-6.826 4.964-4.806-6.819-.948-3.002-6.241-3.001 6.241z"/>
    <path 
    	stroke="white"
        fill="white"
        stroke-width="1"
    	d="
        	M 0 11
            L 0 0
            L 12 0
            L 12 3
            L 9 9
            L 0 10
        "
    />
    <path 
    	stroke="white"
        fill="white"
        stroke-width="1"
    	d="
        	M 0 10
            L 0 30
            L 5 30
            L 5 25
            L 6 15
            L 0 10
        "
    />
    <path 
    	stroke="white"
        fill="white"
        stroke-width="1"
    	d="
        	M 3 30
            L 26 30
            L 26 25
            L 21 26
            L 13 20
            L 2 26
        "
    />
    <path 
    	stroke="white"
        fill="white"
        stroke-width="1"
    	d="
        	M 26 0
            L 26 30
            L 20 30
            L 20 26
            L 18 16
            L 23 10
            L 16 10
            L 13 4
            L 13 0
            L 26 0
 
        "
    />
   
</svg>
 
</body>
</html>

P.S. You can play with around paths at you own and make them more pretty, I think.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.