Skip to content

Instantly share code, notes, and snippets.

@jmorton

jmorton/dabblet.css

Last active August 31, 2018 17:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmorton/2ae611e2ad1467cd68c4640c933d9d28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmorton/2ae611e2ad1467cd68c4640c933d9d28 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jmorton revised this gist Aug 31, 2018. 1 changed file with 0 additions and 6 deletions.
    6 changes: 0 additions & 6 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,12 +6,6 @@

    <g transform="translate(400,200)" stroke-width="6" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="s2 turn slow linear"></ellipse>
    <g class="turn slower linear">
    <ellipse cx="0" cy="90" rx="10" ry="10" class="s2 turn slower"></ellipse>
    <ellipse cx="0" cy="-90" rx="10" ry="10" class="s1 turn slow"></ellipse>
    <ellipse cx="90" cy="0" rx="10" ry="10" class="s1 turn slower"></ellipse>
    <ellipse cx="-90" cy="0" rx="10" ry="10" class="s2 turn slow"></ellipse>
    </g>
    </g>

    </svg>
  2. jmorton revised this gist Aug 31, 2018. No changes.
  3. jmorton revised this gist Aug 31, 2018. 2 changed files with 30 additions and 10 deletions.
    22 changes: 17 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ svg * {
    animation-direction: alternate;
    }

    .linear { animation-timing-function: linear; }
    .linear { animation-timing-function: linear; animation-direction: normal; }
    .gentle { animation-timing-function: ease-in-out; }

    .faster { animation-duration: 2s; }
    @@ -23,11 +23,23 @@ svg * {

    .turn { animation-name: turner; }
    .trace { animation-name: tracer; }
    .throb { animation-name: throb; }

    .s1 { stroke-dasharray: 10 3 20 3 30 3; stroke-dashoffset: 10; }
    .s2 { stroke-dasharray: 10 3 30 3 10 3; stroke-dashoffset: 10; }
    .s1 { stroke-dasharray: 10 2; stroke-dashoffset: 0; }
    .s2 { stroke-dasharray: 1 1 3 5 8 13 21 1; stroke-dashoffset: 0; }

    @keyframes tracer {
    0% { stroke-dasharray: 10 3 20 3 30 3; stroke-dashoffset: 10; }
    100% { stroke-dasharray: 10 3 10 3 10 3; stroke-dashoffset: 10; }
    0% { stroke-dasharray: 20 0; stroke-dashoffset: 0; }
    100% { stroke-dasharray: 100 10; stroke-dashoffset: 0; }
    }

    @keyframes turner {
    from { transform: rotate(0); }
    to { transform: rotate(1turn); }
    }

    @keyframes throb {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.72); }
    100% { transform: scale(1.0); }
    }
    18 changes: 13 additions & 5 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,17 @@
    <svg width="100%" height="800">
    <g transform="translate(300,100)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace faster linear"></ellipse>
    <ellipse cx="200" cy="0" rx="40" ry="40" class="s1"></ellipse>
    <ellipse cx="400" cy="0" rx="40" ry="40" class="s2"></ellipse>


    <!--<g transform="translate(400,150)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace trace slow gentle"></ellipse>
    </g>-->

    <g transform="translate(400,200)" stroke-width="6" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="s2 turn slow linear"></ellipse>
    <g class="turn slower linear">
    <ellipse cx="0" cy="90" rx="10" ry="10" class="s2 turn slower"></ellipse>
    <ellipse cx="0" cy="-90" rx="10" ry="10" class="s1 turn slow"></ellipse>
    <ellipse cx="90" cy="0" rx="10" ry="10" class="s1 turn slower"></ellipse>
    <ellipse cx="-90" cy="0" rx="10" ry="10" class="s2 turn slow"></ellipse>
    </g>
    </g>

    </svg>
  4. jmorton revised this gist Aug 31, 2018. 2 changed files with 10 additions and 6 deletions.
    7 changes: 5 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,10 @@ svg * {
    .turn { animation-name: turner; }
    .trace { animation-name: tracer; }

    .s1 { stroke-dasharray: 10 3 20 3 30 3; stroke-dashoffset: 10; }
    .s2 { stroke-dasharray: 10 3 30 3 10 3; stroke-dashoffset: 10; }

    @keyframes tracer {
    from { stroke-dasharray: 1, 0; }
    to { stroke-dasharray: 400, 0; }
    0% { stroke-dasharray: 10 3 20 3 30 3; stroke-dashoffset: 10; }
    100% { stroke-dasharray: 10 3 10 3 10 3; stroke-dashoffset: 10; }
    }
    9 changes: 5 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,9 @@
    <svg width="100%" height="800">
    <g transform="translate(300,100), rotate(-90)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace slow gentle"></ellipse>
    <g transform="translate(300,100)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace faster linear"></ellipse>
    <ellipse cx="200" cy="0" rx="40" ry="40" class="s1"></ellipse>
    <ellipse cx="400" cy="0" rx="40" ry="40" class="s2"></ellipse>

    </g>



    </svg>
  5. jmorton revised this gist Aug 31, 2018. 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
    @@ -1,5 +1,5 @@
    /**
    * The first commented line is your dabblet’s title
    * SVG tracer
    */

    body {
  6. jmorton revised this gist Aug 31, 2018. No changes.
  7. jmorton revised this gist Aug 31, 2018. 2 changed files with 7 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,8 +9,8 @@ body {
    }

    svg * {
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }

    .linear { animation-timing-function: linear; }
    @@ -25,6 +25,6 @@ svg * {
    .trace { animation-name: tracer; }

    @keyframes tracer {
    from { stroke-dasharray: 20px, 20; }
    to { stroke-dasharray: 40px, 20; }
    from { stroke-dasharray: 1, 0; }
    to { stroke-dasharray: 400, 0; }
    }
    5 changes: 4 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,8 @@
    <svg width="600" height="400">
    <svg width="100%" height="800">
    <g transform="translate(300,100), rotate(-90)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace slow gentle"></ellipse>
    </g>



    </svg>
  8. jmorton created this gist Aug 31, 2018.
    30 changes: 30 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    /**
    * The first commented line is your dabblet’s title
    */

    body {
    background: #f06;
    background: linear-gradient(45deg, #f06, yellow);
    min-height: 100%;
    }

    svg * {
    animation-direction: alternate;
    animation-iteration-count: infinite;
    }

    .linear { animation-timing-function: linear; }
    .gentle { animation-timing-function: ease-in-out; }

    .faster { animation-duration: 2s; }
    .fast { animation-duration: 4s; }
    .slow { animation-duration: 8s; }
    .slower { animation-duration: 16s; }

    .turn { animation-name: turner; }
    .trace { animation-name: tracer; }

    @keyframes tracer {
    from { stroke-dasharray: 20px, 20; }
    to { stroke-dasharray: 40px, 20; }
    }
    5 changes: 5 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <svg width="600" height="400">
    <g transform="translate(300,100), rotate(-90)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
    <ellipse cx="0" cy="0" rx="40" ry="40" class="trace slow gentle"></ellipse>
    </g>
    </svg>
    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":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}