JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
</style>

<h1>
Filled Marker as Repeating Path Segments <br> Cant get marker-pattern working..
</h1>

<svg width="1200" height="400" viewBox="0 0 400 100">
  <defs>
    <marker id="chevron"
      refX="10" refY="10" 
      markerUnits="userSpaceOnUse"
      markerWidth="20" markerHeight="20"
      orient="auto" fill="rgba(2,123,243,1)	">
      <path d="M0 0 10 0 20 10 10 20 0 20 10 10Z" />
    </marker>
     <marker id="chevronBack"
      viewBox="0 0 20 20" refX="10" refY="10" 
      markerUnits="userSpaceOnUse"
      markerWidth="20" markerHeight="20"
      orient="auto" fill="rgba(0,116,143,1)" >
      <path d="M10 0 0 10 10 20 20 20 10 10 20 0Z"  />
    </marker>
  </defs>
 

  <path d="M40 0 60 0 80 0 100 0 120 0 140 0 160 0 180 0 200 0"
        fill="none" stroke-width="20px"  stroke="rgba(2,123,243,.3)"
        marker-start="url(#chevron)"
        marker-mid="url(#chevron)"
        marker-end="url(#chevron)"  />


<path d="M40 25 200 25"
        fill="none" stroke-width="20px"  stroke="rgba(2,123,243,.3)"
        marker-start="url(#chevron)"
        marker-end="url(#chevron)" marker-pattern="20 url(#chevron) 40 url(#chevron) "/>


        
          <path d="M40 55 60 55"
        fill="none" stroke-width="20px"  stroke="rgba(2,123,243,.3)"
        marker-start="url(#chevronBack)"
        marker-mid="url(#chevronBack)"
        marker-end="url(#chevronBack)"  />
        
  <path d="M40 85 60 85 80 85 100 85 120 85 140 85 160 85 180 85 200 85"
        fill="none" stroke-width="20px"  stroke="rgba(0,116,143,.3)"
        marker-start="url(#chevronBack)"
        marker-mid="url(#chevronBack)"
        marker-end="url(#chevronBack)" />
        </svg>



<h1>
Text Path
</h1>

<svg  height="70"  width="550" viewBox="0 0 500 60" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern...

CSS

body {
  background-color: rgba(31, 37, 46, 1);
  color: #fff;
  font-family: Raleway, sans-serif;
  padding:20px;
}

path.leaflet-interactive {
 fill: red ;     
}

text {
	font-size:28px;
	font-weight: bold;
	font-family: impact;
}