Skip to content

Instantly share code, notes, and snippets.

@csssecrets

csssecrets/dabblet.css

Last active May 3, 2024 05:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csssecrets/bda1bf6b0c4adbcea63d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csssecrets/bda1bf6b0c4adbcea63d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csssecrets revised this gist Apr 19, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ body {
    .circular svg {
    display: block;
    overflow: visible;
    xtransition: 10s linear transform;
    transition: 10s linear transform;
    }

    .circular svg:hover { transform: rotate(-2turn); }
  2. csssecrets revised this gist Feb 6, 2015. 4 changed files with 40 additions and 12 deletions.
    16 changes: 11 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,14 +2,20 @@
    * Text on a circle
    */

    body {
    font: bold 120% Helvetica, sans-serif;
    }

    .circular {
    width: 30em;
    height: 30em;
    margin: 4em auto 0;
    }

    .circular svg {
    display: block;
    overflow: visible;
    width: 70vmin;
    height: 70vmin;
    font: bold 120% Helvetica, sans-serif;
    margin: 3em auto 0;
    transition: 10s linear;
    xtransition: 10s linear transform;
    }

    .circular svg:hover { transform: rotate(-2turn); }
    5 changes: 0 additions & 5 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,3 @@
    <div class="circular">
    <svg viewBox="0 0 100 100">
    <path d="M0,50 a50,50 0 1,1 0,1z" id="circle" />
    <text><textPath xlink:href="#circle">
    circular reasoning works because
    </textPath></text>
    </svg>
    </div>
    29 changes: 28 additions & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,28 @@
    // alert('Hello world!');
    function $$(selector, context) {
    context = context || document;
    var elements = context.querySelectorAll(selector);
    return Array.prototype.slice.call(elements);
    }

    $$('.circular').forEach(function(el) {
    var NS = "http://www.w3.org/2000/svg";

    var svg = document.createElementNS(NS, "svg");
    svg.setAttribute("viewBox", "0 0 100 100");

    var circle = document.createElementNS(NS, "path");
    circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
    circle.setAttribute("id", "circle");

    var text = document.createElementNS(NS, "text");
    var textPath = document.createElementNS(NS, "textPath");
    textPath.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', '#circle');
    textPath.textContent = el.textContent;
    text.appendChild(textPath);

    svg.appendChild(circle);
    svg.appendChild(text);

    el.textContent = '';
    el.appendChild(svg);
    });
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  3. csssecrets revised this gist Feb 6, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * Text on a circle
    */

    .circular > svg {
    .circular svg {
    display: block;
    overflow: visible;
    width: 70vmin;
    @@ -12,7 +12,7 @@
    transition: 10s linear;
    }

    .circular > svg:hover { transform: rotate(-2turn); }
    .circular svg:hover { transform: rotate(-2turn); }

    .circular > svg text { fill: currentColor }
    .circular > svg path { fill: none; }
    .circular text { fill: currentColor }
    .circular path { fill: none; }
  4. csssecrets revised this gist Feb 6, 2015. 2 changed files with 8 additions and 11 deletions.
    15 changes: 6 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,20 +2,17 @@
    * Text on a circle
    */

    div {
    .circular > svg {
    display: block;
    overflow: visible;
    width: 70vmin;
    height: 70vmin;
    font: bold 120% Helvetica, sans-serif;
    margin: 3em auto 0;
    }

    div > svg {
    display: block;
    overflow: visible;
    transition: 10s linear;
    }

    div > svg:hover { transform: rotate(-2turn); }
    .circular > svg:hover { transform: rotate(-2turn); }

    div > svg text { fill: currentColor }
    div > svg path { fill: none; }
    .circular > svg text { fill: currentColor }
    .circular > svg path { fill: none; }
    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <div>
    <div class="circular">
    <svg viewBox="0 0 100 100">
    <path d="M 0,50 a 50,50 0 1,1 0,.01" id="circle" />
    <path d="M0,50 a50,50 0 1,1 0,1z" id="circle" />
    <text><textPath xlink:href="#circle">
    circular reasoning works because
    </textPath></text>
  5. csssecrets revised this gist Feb 6, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,10 +12,10 @@ div {
    div > svg {
    display: block;
    overflow: visible;
    transition: 5s linear;
    transition: 10s linear;
    }

    div > svg:hover { transform: rotate(1turn); }
    div > svg:hover { transform: rotate(-2turn); }

    div > svg text { fill: currentColor }
    div > svg path { fill: none; }
  6. csssecrets revised this gist Feb 6, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ div {
    div > svg {
    display: block;
    overflow: visible;
    transition: .5s linear;
    transition: 5s linear;
    }

    div > svg:hover { transform: rotate(1turn); }
  7. csssecrets revised this gist Feb 6, 2015. 2 changed files with 10 additions and 18 deletions.
    22 changes: 7 additions & 15 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,27 +3,19 @@
    */

    div {
    width: 25em;
    height: 25em;
    font: 70%/1.5 Baskerville, Palatino, serif;
    width: 70vmin;
    height: 70vmin;
    font: bold 120% Helvetica, sans-serif;
    margin: 3em auto 0;
    }

    div > svg {
    display: block;
    overflow: visible;
    transition: 5s linear;
    transition: .5s linear;
    }

    div > svg:hover {
    transform: rotate(1turn);
    }

    div > svg text {
    font: inherit;
    letter-spacing: .1em;
    text-anchor: middle;
    fill: currentColor;
    }

    div > svg:hover { transform: rotate(1turn); }

    div > svg text { fill: currentColor }
    div > svg path { fill: none; }
    6 changes: 3 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <div>
    <svg viewBox="0 0 100 100">
    <path d="M 0,50 a 50,50 0 1,1 0,.001" id="circle" />
    <text><textPath startOffset="50%" xlink:href="#circle">
    The only way to get rid of a temptation is to yield to it.
    <path d="M 0,50 a 50,50 0 1,1 0,.01" id="circle" />
    <text><textPath xlink:href="#circle">
    circular reasoning works because
    </textPath></text>
    </svg>
    </div>
  8. csssecrets created this gist Feb 6, 2015.
    29 changes: 29 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /**
    * Text on a circle
    */

    div {
    width: 25em;
    height: 25em;
    font: 70%/1.5 Baskerville, Palatino, serif;
    margin: 3em auto 0;
    }

    div > svg {
    display: block;
    overflow: visible;
    transition: 5s linear;
    }

    div > svg:hover {
    transform: rotate(1turn);
    }

    div > svg text {
    font: inherit;
    letter-spacing: .1em;
    text-anchor: middle;
    fill: currentColor;
    }

    div > svg path { fill: none; }
    8 changes: 8 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div>
    <svg viewBox="0 0 100 100">
    <path d="M 0,50 a 50,50 0 1,1 0,.001" id="circle" />
    <text><textPath startOffset="50%" xlink:href="#circle">
    The only way to get rid of a temptation is to yield to it.
    </textPath></text>
    </svg>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}