JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jsxgraph.org/beta/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://jsxgraph.org/beta/jsxgraph.css">
    <!-- Invisible SVG image to define various filter effects -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display:hidden" width="0" height="0">
      <defs>

        <!-- Filter `pencil_style`  -->       
        <filter x="-2%" y="-2%" width="104%" height="104%" filterUnits="objectBoundingBox" id="pencil_style">
            <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" result="noise">
            </feTurbulence>
            <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="3" in="SourceGraphic"
                result="newSource">
            </feDisplacementMap>
        </filter>

        <!-- Filter `hand_drawing` to simulate hand drawing  -->
        <filter id="hand_drawing" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
            primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
            <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch"
                result="turbulence" />
            <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="G" yChannelSelector="A"
                result="displacementMap" />
        </filter>

       <!-- Fill pattern `circle_pattern1` -->
       <pattern id="circle_pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
         <circle cx="10" cy="10" r="10" fill="#ff000022" />
         </pattern>
       
       <!-- Fill pattern `circle_pattern2` -->
       <pattern id="circle_pattern2" x="0" y="0" width="20%" height="20%" 
                patternUnits="objectBoundingBox"
                patternContentUnits="objectBoundingBox"
         >
            <circle cx="0.1" cy="0.1" r="0.1" fill="#ff000022" />
        </pattern>

            <pattern id="img1"...

CSS

.pencil_style {
    filter: url(#pencil_style);
}

.hand_drawing {
    filter: url(#hand_drawing);
}

.circle_pattern1 {
    fill: url(#circle_pattern1);
}

.circle_pattern2 {
    fill: url(#circle_pattern2);
}

.blur {
    filter: blur(2px);
}

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
	boundingbox: [-5, 9, 5, -1],
  axis: false,
  grid: false
});

var txt = board.create('text', [-4, 8, 'Text with SVG filter pencil_style'], {
    cssClass: 'pencil_style',
    parse: false,
    highlight: false,
    fontSize: 32,
    strokeColor: 'black'
});

var a = board.create('segment', [[-4, 7], [2, 6]], {
    cssClass: 'pencil_style',    // Does not work for horizontal lines
    highlightCssClass: 'pencil_style'
});

var f = board.create('functiongraph', ['sin(2 * x) + 5'], {
    fixed: false,
    cssClass: 'hand_drawing',    // Does not work for horizontal lines
    highlightCssClass: 'pencil_style'
});

var path = board.create('curve', [[-4, -2, -2, -4, -4], [0, 0, 4, 4, 0]], {
    fixed: false,
    cssClass: 'pencil_style circle_pattern1',
    highlightCssClass: '',
    fillColor: 'white',
    highlightFillColor: 'none'
});

var pol = board.create('polygon', [[0, 0], [2, 0], [2, 4], [0, 4]], {
    cssClass: 'circle_pattern2',
    highlightCssClass: 'circle_pattern2',
    fillOpacity: 0.6,
    tabindex: -1,
    hasInnerPoints: true
});

// CSS blur on SVG element
var a = board.create('segment', [[3, 0], [4, 4]], {
    cssClass: 'blur',    // Does not work on Safari (so far)
    highlightCssClass: 'blur'
});