Gradient color

HTML

<script src="https://cdn.jsdelivr.net/npm/ol@v10.2.1/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.2.1/ol.css">
<div id="map" class="map"></div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}

TypeScript

// Map initialisieren
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([-3.683060, 40.417317]),
        zoom: 19,
      }),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ]
    });

var defaultFeature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([-3.683060, 40.417317])));
var gradientFeature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([-3.683060, 40.417317])));

var radius = 20;

gradientFeature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: radius * 3,
    fill: new ol.style.Fill({
      color: gradient(radius, '#FF0000', '#ABCABC')
    })
  })
}));

map.addLayer(new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      defaultFeature, 
      gradientFeature
    ]
  })
}));

function gradient(radius: number, bottomColor: string, topColor: string) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    const size = radius * 2;
    canvas.width = size;
    canvas.height = size;

    const gradient = context.createLinearGradient(0, size, 0, 0);
    gradient.addColorStop(0, bottomColor);
    gradient.addColorStop(1, topColor);

    context.fillStyle = gradient;
    context.beginPath();
    context.arc(radius, radius, radius, 0, 2 * Math.PI);
    context.fill();

    return context.createPattern(canvas, 'no-repeat');
}