Skip to content

Instantly share code, notes, and snippets.

@stoyanvi
Created October 28, 2014 14:10

Revisions

  1. stoyanvi revised this gist Oct 28, 2014. 1 changed file with 0 additions and 7 deletions.
    7 changes: 0 additions & 7 deletions kuqcz.markdown
    Original file line number Diff line number Diff line change
    @@ -1,7 +0,0 @@
    kuqcz
    -----


    A [Pen](http://codepen.io/stoyanvi/pen/kuqcz) by [Stoyan Ivanov](http://codepen.io/stoyanvi) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/stoyanvi/pen/kuqcz/license).
  2. stoyanvi created this gist Oct 28, 2014.
    1 change: 1 addition & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="svg-icon svg-icon--cloud"></div>
    7 changes: 7 additions & 0 deletions kuqcz.markdown
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    kuqcz
    -----


    A [Pen](http://codepen.io/stoyanvi/pen/kuqcz) by [Stoyan Ivanov](http://codepen.io/stoyanvi) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/stoyanvi/pen/kuqcz/license).
    15 changes: 15 additions & 0 deletions style.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    @import "compass/css3";
    $cloud-color: rgba(#000, .25);

    .svg-icon--cloud {
    background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 15 11'><path fill='#{$cloud-color}' d='M12,11H3.5C1.57,11,0,9.43,0,7.5c0-1.398,0.828-2.609,2.016-3.164C2.008,4.227,2,4.109,2,4c0-2.211,1.789-4,4-4c1.672,0,3.102,1.023,3.703,2.484C10.047,2.18,10.5,2,11,2c1.102,0,2,0.898,2,2c0,0.398-0.117,0.766-0.32,1.078C14.008,5.391,15,6.578,15,8C15,9.656,13.656,11,12,11z'></path></svg>");
    }

    .svg-icon {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    margin: 20px auto;
    }