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

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

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

<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

Draw on an image

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

cm-resize demo

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

A Pen by Andreas Borgen on CodePen.

License.

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

Chroma.js Color Scale Helper

Based on http://gka.github.io/palettes/

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

<svg id="demo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <title>circuitMaster</title>
  <rect width="1000" height="1000" fill="#29abe2"/>

  <g id="blackCircuits">
    <path class="blackOutlineInside master" d="M644.37,336.29,410.7,570h242L765.37,457.28a64.37,64.37,0,1,1,61.08,44h0A64.36,64.36,0,0,1,806.12,498L685,619.15a29.12,29.12,0,0,1-20.41,8.46H341.12a28.82,28.82,0,0,1-20.38-49.21L603.59,295.54a64.29,64.29,0,1,1,40.78,40.75Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="2"/>
    <path class="blackOutlineOutside master" d="M646.07,343.08,425.18,564h225L758.58,455.58a70.37,70.37,0,1,1,67.86,51.73h0a70.47,70.47,0,0,1-18.62-2.49L689.29,623.39a35.17,35.17,0,0,1-24.65,10.22H341.12a34.82,34.82,0,0,1-24.6-59.47l280.3-280.3a70.28,70.28,0,1,1,49.26,49.24Z" fill="none" stroke="#000014" stroke-miterlimit="10" stroke-width="2"/>
    <path id="blackCircuit" d="M785.15,395.78a58.37,58.37,0,0,0-12.84,63L655.19,576h-259L642.84,329.34a58.3,58.3,0,1,0-32.29-32.27