cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="255.622px" height="255.612px" viewBox="0 0 255.622 255.612" enable-background="new 0 0 255.622 255.612" xml:space="preserve">
  <path title="inspriation" class="inspiration-tier filter-tooltip" d="M165.059 192.122c-11.107 6.454-23.189 9.722-35.186 10.091l-0.164 28.102c16.852-0.346 33.854-4.84 49.46-13.908 47.963-27.87 64.979-88.563 39.147-137.128l-24.303 14.12C212.071 128.536 199.609 172.047 165.059 192.122z"/>
  <path title="resources" class="resource-tier filter-tooltip" d="M127.374 202.232c-25.686-0.072-50.651-13.371-64.486-37.182 -13.473-23.185-13.062-50.607-1.348-72.666L37.164 78.374c-16.539 30.485-17.26 68.605 1.439 100.787 19.015 32.724 53.31 51.038 88.606 51.174L127.374 202.232z"/>
  <path title="work" class="work-tier filter-tooltip" d="M62.754 90.2c6.309-10.977 15.475-20.505 27.206-27.322 35.689-20.738 81.433-8.616 102.171 27.074 0.24 0.413 0.454 0.836 0.686 1.251l24.299-14.119c-0.233-0.415-0.461-0.83-0.7-1.241 -28.532-49.104-91.464-65.78-140.565-37.249C59.702 47.977 47.061 61.082 38.381 76.19L62.754 90.2z"/>
  <g>
    <path title="web resources" class="resource-web-tier filter-tooltip" d="M19.424 191.566l17.452-10.111c-0.19-0.319-0.39-0.632-0.577-0.955 -19.194-33.035-18.444-72.17-1.446-103.454L17.362 66.992c-20.463 37.332-21.449 84.146 1.498 123.641C19.043 190.948 19.238 191.253 19.424 191.566z"/>
    <path title="print resources" class="resource-print-tier filter-tooltip" d="M38.169 183.597l-17.452 10.111c23.555 38.036 64.37 59.279 106.359 59.463L127.196 233C92.115 232.862 58 215.223 38.169 183.597z"/>
  </g>
  <path title="print work" class="work-print-tier filter-tooltip" d="M78.436 11.81c-4.768 2.029-9.463 4.372-14.059 7.042C44.64 30.32 29.192 46.34 18.583 64.811l17.488 10.053c8.905-15.502 21.872-28.946 38.439-38.572 3.816-2.218 7.716-4.165 11.674-5.855L78.436 11.81z"/>
  <path title="web work"  class="work-web-tier filter-tooltip" d="M171.638 9.854c-28.7-10.744-61.115-10.976-90.89 1.004l7.748 18.624c24.98-9.979 52.151-9.723 76.205-0.678L171.638 9.854z"/>
  <path title="art work" class="work-art-tier filter-tooltip" d="M236.158 64.37c-14.716-25.326-36.924-43.586-62.187-53.618l-6.94 18.96c20.992 8.465 39.437 23.703 51.689 44.79 0.239 0.412 0.468 0.828 0.702 1.242l17.438-10.133C236.625 65.197 236.397 64.782 236.158 64.37z"/>
  <path title="print inspiration" class="inspiration-print-tier filter-tooltip" d="M231.99 142.041l20.004 2.577c3.538-25.609-0.762-52.486-13.92-76.82l-17.45 10.14C231.464 98.272 234.974 120.687 231.99 142.041z"/>
  <path title="web inspiration" class="inspiration-web-tier filter-tooltip" d="M208.804 223.339c23.438-19.834 38.216-47.133 42.827-76.247l-20.018-2.578c-3.965 24.189-16.298 46.847-35.768 63.363L208.804 223.339z"/>
  <path title="art inspiration" class="inspiration-art-tier filter-tooltip" d="M193.918 209.47c-4.166 3.367-8.635 6.466-13.411 9.241 -16.032 9.315-33.501 13.926-50.813 14.27l-0.118 20.176c20.797-0.323 41.802-5.814 61.065-17.008 5.788-3.363 11.197-7.126 16.234-11.219L193.918 209.47z"/>
  </svg>
</div>
            
          
!
            
              $inpiration-color: #172caf;
$work-color: #00b945;
$resource-color: #ff0d00;

.inspiration-tier {
  fill: $inpiration-color;
  &:hover {
    fill: darken($inpiration-color, 20%);
  }
}
.inspiration-print-tier {
  fill: lighten($inpiration-color, 20%);
  &:hover {
    fill: darken($inpiration-color, 20%);
  }
}
.inspiration-web-tier {
  fill: lighten($inpiration-color, 30%);
  &:hover {
    fill: darken($inpiration-color, 20%);
  }
}
.inspiration-art-tier {
  fill: lighten($inpiration-color, 40%);
  &:hover {
  fill: darken($inpiration-color, 20%);
  }
}
.work-tier {
  fill: $work-color;
  &:hover {
    fill: darken($work-color, 20%);
  }
}
.work-print-tier {
  fill: lighten($work-color, 20%);
  &:hover {
    fill: darken($work-color, 20%);
  }
}  
.work-web-tier {
  fill: lighten($work-color, 30%);
  &:hover {
    fill: darken($work-color, 20%);
  }
}
.work-art-tier {
  fill: lighten($work-color, 40%);
  &:hover {
    fill: darken($work-color, 20%);
  }
}
.resource-tier {
  fill: $resource-color;
  &:hover {
    fill: darken($resource-color, 20%);
  }
}
.resource-print-tier {
  fill: lighten($resource-color, 20%);
  &:hover {
    fill: darken($resource-color, 20%);
  }
}
.resource-web-tier {
  fill: lighten($resource-color, 30%);
  &:hover {
    fill: darken($resource-color, 20%);
  }
}

.tooltip {
  display: none;
  position: absolute;
  border-radius: 5px;
  font: {
    family: Arial, Arial, Helvetica, sans-serif;
    size: 1em;
  }
  color: #000;
  text-align: center;
  top: 110px;
  left: 80px;
  width: 110px;
}
            
          
!
            
              // Tooltip only Text
$('.filter-tooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
});
            
          
!
999px
Loading ..................

Console