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.05" numOctaves="3" />
            <feDisplacementMap in="SourceGraphic" scale="12" />
        </filter>
    </defs>

Sphinxxxx

cm-resize demo

https://github.com/Sphinxxxx/cm-resize

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

function initThree(config) {
    config = config || {};
    const container = config.container,
          addLights = (config.addLights !== false),
          addControls = (config.addControls !== false);

    const renderer = new THREE.WebGLRenderer();
    (container || document.body).appendChild(renderer.domElement);

    // create a scene

Sphinxxxx

Draw on an image

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

<h2>Drag the round handles to warp the image</h2>

<img id="i" />
<div id="drag-wrapper">
    <canvas id="c"></canvas>
    
    <div class="drag-handle" data-corner="0"></div>
    <div class="drag-handle" data-corner="1"></div>
    <div class="drag-handle" data-corner="2"></div>
    <div class="drag-handle" data-corner="3"></div>

Sphinxxxx

main#app
    h1 Superellipse
    a(href="https://en.wikipedia.org/wiki/Superellipse")
        img(src="https://wikimedia.org/api/rest_v1/media/math/render/svg/2b21da32fe407ff5714620b26c50343d21afed15")
    
    section#settings.inputs(@input="recalc")
        label
            span a
            input(type="range" v-model.number="config.a" min="10" max="400")
            output {{config.a}}

Sphinxxxx

Google Maps interactive SVG overlay

https://stackoverflow.com/questions/50327032/google-maps-overlayview-make-only-svg-clickable
http://serversideguy.com/2017/10/31/how-do-i-place-svgs-on-a-google-map-using-custom-overlays/

A Pen by Andreas Borgen on CodePen.

License.

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

<main>
    <h1>&lt;meter&gt; element settings</h1>
    <h3><a target="_blank" href="https://stackoverflow.com/questions/44939391/what-exactly-do-the-low-high-and-optimum-attributes-do-in-the-meter-element">What exactly do the low, high and optimum attributes do?</a></h3>

    <label>Thresholds (<code>low</code>/<code>high</code>) & <code>optimum</code>:</label>
    <div class="slider" id="sl1">
        <div class="thumb" data-icon="▿" data-point="down" data-prop="low"></div>
        <div class="thumb" data-icon="▿" data-point="down" data-prop="high"></div>
        <div class="thumb" data-icon="★" data-point="down" data-prop="optimum" style="color:orange;"></div>
    </div>

Sphinxxxx

<canvas></canvas>