Sphinxxxx

Drag Rotate

Quick mess to make a div rotatable by dragging handle.

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

Procedural City

From
http://learningthreejs.com/blog/2013/08/02/how-to-do-a-procedural-city-in-100lines/

Updated to work with latest three.js

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

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

<h1>Simple SVG Editor</h1>

<button id="prettify">Prettify</button>
<textarea id="svgInput" class="svg-editor" >
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" >
    <!--http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands-->
    <g stroke="black" stroke-width="2" fill="none" >
        <path d="M90,90 v-80 a80,80 0 0,0 -80,80 z" fill="red" />

Sphinxxxx

15. Load .obj file

---

How to load an external obj file and add it into the scene.

Forked from Louis Hoebregts's Pen 15. Load .obj file.

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

<script src="//d3js.org/d3.v3.js"></script>

<label>
    <input type="checkbox" onchange="toggleFreehand(this.checked)" />
    Freehand
</label>

Sphinxxxx

Draggable elements boilerplate

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

CSS gradient generator

CSS gradient generator using the formal syntax:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

//Replacement for
//https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
//Extracted from
//https://github.com/juliangarnier/anime/blob/master/anime.js
function getSvgTotalLength(el) {

    function getDistance(p1, p2) {
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); 
    }

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

Sphinxxxx

Chroma.js Color Scale Helper

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

A Pen by Andreas Borgen on CodePen.

License.