Sphinxxxx

<script>console.clear();</script>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-draggable-number@1.0.1/dist/vueDraggableNumber.umd.min.js"></script>
<script src="https://unpkg.com/drag-tracker@1"></script>
<script src="https://unpkg.com/@sphinxxxx/zoomable-svg@0.2"></script>
<script src="https://unpkg.com/d-path-parser@1"></script>


<main id="app">

Sphinxxxx

<h2>Shape subdivision</h2>

<section id="app">
    <label>
        <span>Dividers</span>
        <input type="number" v-model.number="svg.dividers" min="1">
    </label>
    <svg :width="svg.size[0]" :height="svg.size[1]">
        <corner v-for="c in getCorners()" :c="c"></corner>
        <bezier v-for="b in getBeziers()" :wrapper="b" />

Sphinxxxx

<h2>Shape subdivision</h2>

<section id="app">
    <label>
        <span>Dividers</span>
        <input type="number" v-model.number="svg.dividers" min="1">
    </label>
    <svg :width="svg.size[0]" :height="svg.size[1]">
        <corner v-for="c in svg.shape.corners" :c="c"></corner>
        <bezier v-for="b in getBeziers()" :wrapper="b" />

Sphinxxxx

A general-purpose DOM tree walker based on https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page (Phrogz' answer and its comments).

The textNodesUnder() function would then look like this:

function textNodesUnder(el) {
    return walkNodeTree(el, {
        inspect: n => !['STYLE', 'SCRIPT'].includes(n.nodeName),
        collect: n => (n.nodeType === Node.TEXT_NODE),
        //callback: n => console.log(n.nodeName, n),

});

Sphinxxxx

<script>console.clear();</script>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-draggable-number@1.0.1/dist/vueDraggableNumber.umd.min.js"></script>
<script src="https://unpkg.com/drag-tracker@1"></script>
<script src="https://unpkg.com/@sphinxxxx/zoomable-svg@0.2"></script>
<script src="https://unpkg.com/d-path-parser@1"></script>


<main id="app">

Sphinxxxx

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="220" viewBox="0 0 250 220">
    <defs>
        <!-- https://css-tricks.com/squigglevision-in-css-and-svg/ -->
        <!-- https://codepen.io/mullany/pen/MyWxxX/ -->
        <filter id="squiggler">
            <feTurbulence baseFrequency="0.035" numOctaves="3" />
            <feDisplacementMap in="SourceGraphic" scale="12" xChannelSelector="G" />
        </filter>
    </defs>

Sphinxxxx

@function strip-unit($value, $newUnit: "") {
    //https://www.sitepoint.com/understanding-sass-units/
    $units: (
        'px':   0px,
        'cm':   0cm,
        'mm':   0mm,
        '%':    0%,
        'ch':   0ch,
        'in':   0in,
        'em':   0em,

Sphinxxxx

<script>console.clear();</script>

<script src="//unpkg.com/vue@2"></script>
<script src="//unpkg.com/dat.gui@0.7.7/build/dat.gui.js"></script>
<script src="//unpkg.com/drag-tracker@1"></script>
<script src="//unpkg.com/jsfeat@0.0.8/build/jsfeat.js"></script>
<script src="//unpkg.com/kdbush@3"></script>
<script>
    /*
        tuple by Ry-♦

Sphinxxxx

<script>console.clear();</script>

<script src="//unpkg.com/vue@2"></script>
<script src="//unpkg.com/dat.gui@0.7.7/build/dat.gui.js"></script>
<script src="//unpkg.com/drag-tracker@1"></script>
<script src="//unpkg.com/jsfeat@0.0.8/build/jsfeat.js"></script>
<script src="//unpkg.com/kdbush@3"></script>
<script>
    /*
        tuple by Ry-♦

Sphinxxxx

<script>console.clear();</script>

<script type="text/javascript" src="https://unpkg.com/vue@2"></script>
<script type="text/javascript" src="https://unpkg.com/dat.gui@0.7.7/build/dat.gui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/inspirit/jsfeat@master/build/jsfeat.js"></script>
<script>
    /*
        tuple by Ry-♦
        https://stackoverflow.com/a/21839292/1869660
    */