Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save luckkrit/654be8ef272ee76b37ec8aacfef09ae0 to your computer and use it in GitHub Desktop.

Select an option

Save luckkrit/654be8ef272ee76b37ec8aacfef09ae0 to your computer and use it in GitHub Desktop.

Revisions

  1. @CodeMyUI CodeMyUI created this gist Nov 22, 2016.
    7 changes: 7 additions & 0 deletions codevember-01-svg-motion.markdown
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    #codevember 01 - svg motion
    ---------------------------
    First entry to codevember. It uses my lib slightly changed to handle full text support.

    A [Pen](http://codepen.io/coderitual/pen/QKezVb) by [coderitual](http://codepen.io/coderitual) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/coderitual/pen/QKezVb/license).
    1 change: 1 addition & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="js-odoo"></div>
    1 change: 1 addition & 0 deletions script.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    odoo.default({ el:'.js-odoo', from: 'NOVEMBER16', to: 'CODEVEMBER', animationDelay: 1000 });
    1 change: 1 addition & 0 deletions scripts
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdn.rawgit.com/coderitual/odoo/feature/codevember16/lib/odoo.js"></script>
    19 changes: 19 additions & 0 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    @import url('https://fonts.googleapis.com/css?family=Inconsolata');

    html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    }

    body {
    background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
    font-family: 'Inconsolata';
    font-weight: bold;
    font-size: 16vmin;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    fill: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    }