JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
}

#map {
  height: 100vh;
  width: 100vw;
}

JavaScript

let map = L.map('map').setView([50.5, 1], 8);

let polygon = L.polygon([
    [50, 0],
    [51, 0],
    [51, 2],
    [50, 2]
], {fillColor: 'url(#stripes)', fillOpacity: 1}).addTo(map);

let fillPalette = ['orange', 'green', 'blue'];

let gradientString = `<linearGradient id="stripes" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset=0 stop-color=${fillPalette[0]} />
<stop offset=33% stop-color=${fillPalette[0]} />
<stop offset=33% stop-color=${fillPalette[1]} />
<stop offset=66% stop-color=${fillPalette[1]} />
<stop offset=66% stop-color=${fillPalette[2]} />
<stop offset=100% stop-color=${fillPalette[2]} />
</linearGradient>`

let svg = document.getElementsByTagName('svg')[0];
let svgDefs = document.createElementNS("http://www.w3.org/2000/svg", 'defs');
svgDefs.insertAdjacentHTML('afterbegin', gradientString);
svg.appendChild(svgDefs);