CODEWITHSUNDEEP
htmlcsssvg
Shahid
Shahid

Reputation: 285

Can we apply stitched border to this pattern?

I want to add a stitched border to this pattern

I have applied the stroke but it is appearing at the end but I need it to be 4px below the corners.

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="38%" stop-color="rgb(255, 195, 56)" />
      <stop offset="68%" stop-color="rgb(255, 234, 104)" />
    </linearGradient>
	<style type="text/css"><![CDATA[
       #pat {
         stroke:black; stroke-width:0.1px; stroke-dasharray:0.3; 
       }
    ]]></style>
  </defs>
  <path id="pat" fill="url(#gradient)" d="M0 6 V5 Q2.5 3.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V6" />
</svg>

Upvotes: 1

Views: 47

Answers (1)

Harry
Harry

Reputation: 89790

There could be alternate ways of doing this but in my opinion the easiest way would be to mirror the path in a second path element (or using a path def and use elements) and add a small translate (in Y axis) transform to it.

svg {
  height: 200px;
}
<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="38%" stop-color="rgb(255, 195, 56)" />
      <stop offset="68%" stop-color="rgb(255, 234, 104)" />
    </linearGradient>
    <path d="M0 6 V5 Q2.5 3.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V6" id='wave'/>
    <style type="text/css">
      <![CDATA[ #pat {
        stroke: black;
        stroke-width: .1;
        stroke-dasharray: 0.3;
      }
      ]]>
    </style>
  </defs>
  <use xlink:href="#wave" fill="url(#gradient)" />
  <use xlink:href="#wave" id="pat" fill="transparent" transform="translate(0,.15)" />
</svg>

Upvotes: 1

Related Questions