Tangle zieht Kreise

Tangle schreit ja förmlich danach, damit zu spielen. Diesmal mit dem SVG-Element. Wie das funktioniert, findet man auf StackOverflow, zur Modifikation gibt's nach kurzer Suche auch noch ein paar Tipps im Web. Dann woll'n wir mal.

Disclaimer: mit Browsern, die das kein Embedded SVG unterstützen, wird das hier leider nichts.

Radius: pixel.

In Code schaut das so aus:

Radius: <span data-var="radius"  data-min="10" data-max="100" class="TKAdjustableNumber" >pixel</span>.

<svg xmlns="http://www.w3.org/2000/svg"><circle id="redCircle" cx="50" cy="50" r="50" fill="red" /></svg>

In einer "Wurst" und somit nicht ganz so leserlich wie man vielleicht gern hätte, aber sonst formatiert Ghost da vor sich hin. Fehlt noch das JavaScript, um das ganze zu verdrahten.

<script>
var tangle = new Tangle(document, {
  initialize: function () { this.radius = 10; },
  update:     function () { 
       var circle = document.getElementById("redCircle");
       circle.setAttribute('r', this.radius);
    }
});
</script>

Macht richtig Spaß :)