<iframe 
    src="http://jsxgraph.org/share/iframe/centroid-of-triangle" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Centroid of triangle" 
    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';

    JXG.Options.label.autoPosition = true;
    JXG.Options.text.useMathJax = true;
    JXG.Options.text.fontSize = 16;
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        showCopyright: false,
        showNavigation: false
    });
    
    var p1 = board.create('point', [-3, -3], {
        name: '\\(p_1\\)'
    });
    var p2 = board.create('point', [0, 3], {
        name: '\\(p_2\\)'
    });
    var p3 = board.create('point', [3, -4], {
        name: '\\(p_3\\)'
    });
    
    var l1 = board.create('arrow', [p1, p2], {
        withLabel: true,
        name: '\\(\\vec{v}\\)',
        label: {
            position: 'bot',
            offset: [-25, 0]
        },
        lastArrow: {
            type: 4,
            size: 8
        }
    });
    var l2 = board.create('arrow', [p1, p3], {
        withLabel: true,
        name: '\\(\\vec{w}\\)',
        label: {
            position: 'top',
            offset: [25, -25]
        },
        lastArrow: {
            type: 4,
            size: 8
        }
    });
    var l3 = board.create('arrow', [p2, p3], {});
    
    var m1 = board.create('midpoint', [p2, p3], {
        name: '\\(m_1\\)'
    });
    var m2 = board.create('midpoint', [p1, p3], {
        name: '\\(m_2\\)'
    });
    var m3 = board.create('midpoint', [p1, p2], {
        name: '\\(m_3\\)'
    });
    
    var s1 = board.create('segment', [p1, m1], {});
    var s2 = board.create('segment', [p2, m2], {});
    var s3 = board.create('segment', [p3, m3], {});
    
    var s = board.create('intersection', [s1, s2], {
        name: '\\(s\\)'
    });
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Centroid of triangle" 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.
   */
   
   JXG.Options.label.autoPosition = true;
   JXG.Options.text.useMathJax = true;
   JXG.Options.text.fontSize = 16;
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       showCopyright: false,
       showNavigation: false
   });
   
   var p1 = board.create('point', [-3, -3], {
       name: '\\(p_1\\)'
   });
   var p2 = board.create('point', [0, 3], {
       name: '\\(p_2\\)'
   });
   var p3 = board.create('point', [3, -4], {
       name: '\\(p_3\\)'
   });
   
   var l1 = board.create('arrow', [p1, p2], {
       withLabel: true,
       name: '\\(\\vec{v}\\)',
       label: {
           position: 'bot',
           offset: [-25, 0]
       },
       lastArrow: {
           type: 4,
           size: 8
       }
   });
   var l2 = board.create('arrow', [p1, p3], {
       withLabel: true,
       name: '\\(\\vec{w}\\)',
       label: {
           position: 'top',
           offset: [25, -25]
       },
       lastArrow: {
           type: 4,
           size: 8
       }
   });
   var l3 = board.create('arrow', [p2, p3], {});
   
   var m1 = board.create('midpoint', [p2, p3], {
       name: '\\(m_1\\)'
   });
   var m2 = board.create('midpoint', [p1, p3], {
       name: '\\(m_2\\)'
   });
   var m3 = board.create('midpoint', [p1, p2], {
       name: '\\(m_3\\)'
   });
   
   var s1 = board.create('segment', [p1, m1], {});
   var s2 = board.create('segment', [p2, m2], {});
   var s3 = board.create('segment', [p3, m3], {});
   
   var s = board.create('intersection', [s1, s2], {
       name: '\\(s\\)'
   });
</jsxgraph>