example/earth-shield/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/@babel/standalone"></script>

  <script src="//unpkg.com/react-globe.gl"></script>
  <!--<script src="../../dist/react-globe.gl.js"></script>-->
</head>

<body>
<div id="globeViz"></div>

<script type="text/jsx">
  const shieldRing = { lat: 90, lng: 0 };

  ReactDOM.render(
    <Globe
      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
      ringsData={[shieldRing]}
      ringAltitude={0.25}
      ringColor={() => 'lightblue'}
      ringMaxRadius={180}
      ringPropagationSpeed={20}
      ringRepeatPeriod={200}
    />,
    document.getElementById('globeViz')
  );
</script>
</body>