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

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

Draggable elements boilerplate

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

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

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

Drag Rotate

Quick mess to make a div rotatable by dragging handle.

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

#container

Sphinxxxx

<div id="main">

    <!-- Carousel -->
    <div class="carousel-main carousel-1" data-slide-index="2">
        <!-- Slides -->
        <div class="carousel-item" data-slide-index="0">
            <img src="https://www.fillmurray.com/810/400" />
        </div>
        <div class="carousel-item" data-slide-index="1">
            <img src="https://www.fillmurray.com/620/800" />