body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*
* https://deck.gl/docs/api-reference/extensions/path-style-extension
*/

const path = [[38.35,173.65],[293.1,-81.1],[303.65,-96.2],[308.45,-114.05],[306.85,-132.45],[299,-149.15],[285.95,-162.2],[269.25,-170.05],[250.85,-171.6],[233,-166.85],[217.9,-156.25],[-7.6,69.25],[-22.7,81.8],[-39.9,91.4],[-58.6,97.6],[-78.1,100.25],[-97.75,99.3],[-116.9,94.75],[-134.9,86.7],[-151.05,75.45],[-164.9,61.45],[-175.95,45.15],[-183.8,27.1],[-188.15,7.9],[-188.85,-11.75],[-186,-31.25],[-179.55,-49.85],[-169.75,-66.95],[-157,-81.9],[-141.7,-94.35],[-124.4,-103.7],[-105.65,-109.7],[-86.1,-112.15],[-66.45,-110.95],[-47.4,-106.2],[-29.5,-97.95],[-13.45,-86.5],[1.45,-73.9],[19.65,-66.55],[39.25,-66.35],[57.6,-73.25],[72.2,-86.3],[81.05,-103.8],[83,-123.3],[77.7,-142.15],[65.95,-157.85],[49.3,-168.2],[30.05,-171.8],[-288.85,-171.8]];

const {Deck, COORDINATE_SYSTEM, PathStyleExtension, PathLayer} = deck;

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 0,
    zoom: 16.5
  },
  controller: true,
  
  layers: [
    new PathLayer({
      id: 'dashed',
      data: [
        {path}
      ],
      coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
      coordinateOrigin: [0, 0],
      
      getPath: d => d.path,
      getWidth: 2,
      getColor: [60, 100, 160],
      
      // props added by PathStyleExtension
      getDashArray: [4, 3],
      dashJustified: false,
      
      extensions: [new PathStyleExtension({highPrecisionDash: true})]
    }),
    
    new PathLayer({
      id: 'outline',
      data: [
        {path, offset: -5}, // left
        {path, offset: 5}, // right
      ],
      coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
      coordinateOrigin: [0, 0],
      
      getPath: d => d.path,
      getWidth: 2,
      getColor: [0, 0, 0],
      
      // props added by PathStyleExtension
      getOffset: d => d.offset,
      
      extensions: [new PathStyleExtension({offset: true})]
    })
  ]
});