Sphinxxxx

<script>
    console.clear();

    /*
        (c) 2017, Vladimir Agafonkin
        Simplify.js, a high-performance JS polyline simplification library
        mourner.github.io/simplify-js
    */
    window.simplify = (function(){"use strict";function n(n,r){var t=n[0]-r[0],u=n[1]-r[1];return t*t+u*u}function r(n,r,t){var u=r[0],i=r[1],f=t[0]-u,o=t[1]-i;if(0!==f||0!==o){var e=((n[0]-u)*f+(n[1]-i)*o)/(f*f+o*o);e>1?(u=t[0],i=t[1]):e>0&&(u+=f*e,i+=o*e)}return f=n[0]-u,o=n[1]-i,f*f+o*o}function t(r,t){for(var u,i=r[0],f=[i],o=1,e=r.length;e>o;o++)u=r[o],n(u,i)>t&&(f.push(u),i=u);return i!==u&&f.push(u),f}function u(n,t,i,f,o){for(var e,v=f,a=t+1;i>a;a++){var c=r(n[a],n[t],n[i]);c>v&&(e=a,v=c)}v>f&&(e-t>1&&u(n,t,e,f,o),o.push(n[e]),i-e>1&&u(n,e,i,f,o))}function i(n,r){var t=n.length-1,i=[n[0]];return u(n,0,t,r,i),i.push(n[t]),i}function f(n,r,u){if(n.length<=2)return n;var f=void 0!==r?r*r:1;return n=u?n:t(n,f),n=i(n,f)}return f})();
</script>

Sphinxxxx

<script>
    console.clear();

    /*
        (c) 2017, Vladimir Agafonkin
        Simplify.js, a high-performance JS polyline simplification library
        mourner.github.io/simplify-js
    */
    window.simplify = (function(){"use strict";function n(n,r){var t=n[0]-r[0],u=n[1]-r[1];return t*t+u*u}function r(n,r,t){var u=r[0],i=r[1],f=t[0]-u,o=t[1]-i;if(0!==f||0!==o){var e=((n[0]-u)*f+(n[1]-i)*o)/(f*f+o*o);e>1?(u=t[0],i=t[1]):e>0&&(u+=f*e,i+=o*e)}return f=n[0]-u,o=n[1]-i,f*f+o*o}function t(r,t){for(var u,i=r[0],f=[i],o=1,e=r.length;e>o;o++)u=r[o],n(u,i)>t&&(f.push(u),i=u);return i!==u&&f.push(u),f}function u(n,t,i,f,o){for(var e,v=f,a=t+1;i>a;a++){var c=r(n[a],n[t],n[i]);c>v&&(e=a,v=c)}v>f&&(e-t>1&&u(n,t,e,f,o),o.push(n[e]),i-e>1&&u(n,e,i,f,o))}function i(n,r){var t=n.length-1,i=[n[0]];return u(n,0,t,r,i),i.push(n[t]),i}function f(n,r,u){if(n.length<=2)return n;var f=void 0!==r?r*r:1;return n=u?n:t(n,f),n=i(n,f)}return f})();
</script>

Sphinxxxx

Bezier curve

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

Bezier curve

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

const stackGray = (function() {
    const mulTable = [
        512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292,
        512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292,
        273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259,
        496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292,
        282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373,
        364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259,
        507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381,
        374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292,

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

<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>