<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/shadows" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Shadows" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8],
        keepaspectratio: true
    });
    
    board.options.line.strokeWidth = 2
    // No shadow
    var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false});
    
    // Default shadow
    var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true});
    
    // No shadow
    var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}});
    
    // Shadow uses same color as line
    var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue',
                shadow: {enabled: true, color: '#000000', blend: 1}
            });
    
    // Shadow color as a mixture between black and the line color, additionally set opacity
    var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue',
                shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5}
            });
    
    // Use different value for blur and offset [dx, dy]
    var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue',
                shadow: {enabled: true, offset:[0, 25], blur: 6}
            });
    
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Shadows" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-8, 8, 8, -8],
       keepaspectratio: true
   });
   
   board.options.line.strokeWidth = 2
   // No shadow
   var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false});
   
   // Default shadow
   var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true});
   
   // No shadow
   var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}});
   
   // Shadow uses same color as line
   var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue',
               shadow: {enabled: true, color: '#000000', blend: 1}
           });
   
   // Shadow color as a mixture between black and the line color, additionally set opacity
   var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue',
               shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5}
           });
   
   // Use different value for blur and offset [dx, dy]
   var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue',
               shadow: {enabled: true, offset:[0, 25], blur: 6}
           });
   
</jsxgraph>