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.

            
              <main>
  <header>
    <h1>SVG<strong>Icons</strong></h1>
  </header>
  <article class="flex-item">
    <header>
      <h2>SVG Icons for micro-interactions</h2>
      <p>SVG + Sass</p>
    </header>
    <ul class="flex-item icon_container">
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon huge icon-alarm">
              <g stroke-width=".033333em" stroke-linecap="round" stroke="#444444" fill="none">
                <circle cx="50%" cy="50%" r="1.25em"></circle>
                <line x1="50%" y1="1.2em" x2="50%" y2="50%" class="icon-alarm_arms_long"></line>
                <line x1="50%" y1="1.5em" x2="50%" y2="50%" class="icon-alarm_arms_short"></line>
                <circle r=".7em" cx="34%" cy="32%" stroke-dasharray="1.2em 3em" stroke-dashoffset="2.1em" class="icon-alarm_bells"></circle>
                <circle r=".7em" cx="66%" cy="32%" stroke-dasharray="1.2em 3.15em" stroke-dashoffset="1.1em" class="icon-alarm_bells"></circle>
                <line x1="19%" y1="89%" x2="28%" y2="78%"></line>
                <line x1="81%" y1="89%" x2="72%" y2="78%"></line>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-adjustments">
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444">
                <g class="icon-adjustments_animation">
                  <circle cx=".85em" cy=".43em" r=".2em" fill="none"></circle>
                  <line x1=".86em" y1=".43em" x2=".86em" y2="3.5em"></line>
                </g>
                <g class="icon-adjustments_animation">
                  <circle cx="2em" cy=".43em" r=".2em" fill="none"></circle>
                  <line x1="2em" y1=".43em" x2="2em" y2="3.5em"></line>
                </g>
                <g class="icon-adjustments_animation">
                  <circle cx="3.15em" cy=".43em" r=".2em" fill="none"></circle>
                  <line x1="3.15em" y1=".43em" x2="3.15em" y2="3.5em"></line>
                </g>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-alarm">
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444" fill="none">
                <circle cx="50%" cy="50%" r="1.25em"></circle>
                <line x1="50%" y1="1.2em" x2="50%" y2="50%" class="icon-alarm_arms_long"></line>
                <line x1="50%" y1="1.5em" x2="50%" y2="50%" class="icon-alarm_arms_short"></line>
                <circle r=".7em" cx="34%" cy="32%" stroke-dasharray="1.2em 3em" stroke-dashoffset="2.1em" class="icon-alarm_bells"></circle>
                <circle r=".7em" cx="66%" cy="32%" stroke-dasharray="1.2em 3.15em" stroke-dashoffset="1.1em" class="icon-alarm_bells"></circle>
                <line x1="19%" y1="89%" x2="28%" y2="78%"></line>
                <line x1="81%" y1="89%" x2="72%" y2="78%"></line>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-aperture">
              <defs>
                <clipPath id="icon-aperture_mask" width="100%" height="100%">
                  <circle cx="50%" cy="50%" r="1.25em"></circle>
                </clipPath>
              </defs>
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444" fill="none">
                <circle fill="none" stroke-miterlimit="10" cx="50%" cy="50%" r="1.25em"></circle>
                <g clip-path="url(#icon-aperture_mask)" class="icon-aperture_tooths">
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                  <circle cx="67%" cy="64%" r="1.65em"></circle>
                </g>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-geolocation">
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444" fill="none">
                <g class="icon-geolocation_marker">
                  <path d="M31.25,12c-8.271,0-15,6.742-15,15.027 c0,12.41,14.001,24.324,14.597,24.826C30.964,51.951,31.108,52,31.25,52c0.142,0,0.283-0.047,0.398-0.142 c0.595-0.493,14.602-12.204,14.602-24.832C46.25,18.742,39.521,12,31.25,12L31.25,12z"></path>
                  <path d="M31.25,19.5c-4.136,0-7.5,3.363-7.5,7.5c0,4.136,3.364,7.5,7.5,7.5 c4.136,0,7.5-3.364,7.5-7.5C38.75,22.863,35.386,19.5,31.25,19.5z"></path>
                </g>
                <g stroke-width=".15em" class="icon-geolocation_sparks">
                  <line x1="50%" y1="35%" x2="50%" y2="50%" class="icon-geolocation_sparks-item"></line>
                  <line x1="50%" y1="35%" x2="50%" y2="50%" class="icon-geolocation_sparks-item"></line>
                  <line x1="50%" y1="35%" x2="50%" y2="50%" class="icon-geolocation_sparks-item"></line>
                  <line x1="50%" y1="35%" x2="50%" y2="50%" class="icon-geolocation_sparks-item"></line>
                  <line x1="50%" y1="35%" x2="50%" y2="50%" class="icon-geolocation_sparks-item"></line>
                </g>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-dial">
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444" fill="none">
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".05em" cx="50%" cy="50%" class="icon-dial_dot"></circle>
                <circle r=".35em" cx="50%" cy="50%" class="icon-dial_center"></circle>
                <path d="M39.138,24.996L32.442,18.3c-0.244-0.244-0.64-0.244-0.884,0 l-6.63,6.63c-3.859,3.859-3.891,10.17-0.07,14.069c1.87,1.908,4.369,2.974,7.042,3.001s5.193-0.987,7.101-2.857 c0-0.001,0.071-0.071,0.072-0.073l0,0C42.931,35.211,42.962,28.9,39.138,24.996z" class="icon-dial_mark"></path>
              </g>
            </svg>
      </li>
      <li class="icon_container-item">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-atom">
              <g stroke-width=".1em" stroke-linecap="round" stroke="#444444" fill="none">
                <circle r="1.35em" cx="50%" cy="50%" class="icon-atom_orbit"></circle>
                <circle r="1.35em" cx="50%" cy="50%" class="icon-atom_orbit"></circle>
                <circle r="1.35em" cx="50%" cy="50%" class="icon-atom_orbit"></circle>
                <circle r=".25em" cx="50%" cy="50%"></circle>
              </g>
            </svg>
      </li>
    </ul>
    <footer>
      <header>
        <h3>Icons source:</h3>
      </header>
      <p>
        <a role="link" href="https://www.elegantthemes.com/blog/freebie-of-the-week/free-line-style-icons" title="Go to Elegant Themes article in a new tab"><img src="https://cdn.elegantthemes.com/images/logo2.png" alt="Elegant Themes"></a>
      </p>
    </footer>
  </article>
</main>
            
          
!
            
              @import 'compass/reset';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$base-font: 'Open Sans', sans-serif;
$base-font-size: 16px;
$fancySize: 10em;
$duration: .3s;

$yellow: #FF9E00;

$white: #fefefe;
$gray: #444;
$dark: darken($gray, 10);
$magenta: #FF389D;

$textColor: $gray;

$bezier: cubic-bezier(0.46, -0.44, 0.43, 1.43);

body
{
    font-family: $base-font;
    font-size: $base-font-size;

    text-align: center;

    color: $textColor;
    background: #d0d0d0;
}

main
{
    margin-bottom: 3em;
}

header
{
    margin-bottom: 2em;
}

h1
{
    font-size: 2em;
    margin: 1.4em 0 1em;
}

h2
{
    margin: 0 auto;
    width: 16em;
    line-height: 1.4em;
}

strong
{
    font-weight: 700;
}
p
{
    line-height: 1.5em;
    margin-bottom: 1em;
    &:last-child
    {
        margin: 0;
    }
}
div
{
    position: relative;
}

[aria-hidden="true"]
{
    pointer-events: none;
    position: absolute;
    z-index: 0;
    opacity: 0;
}

.flex-item
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.absolute
{
    position: absolute;
}

[role='link']
{
    display: inline-block;
    border-radius: .1em;
    padding: 1em;
    cursor: pointer;
    transition: all $duration $bezier;
    &:hover
    {
        background-color: #f5f5f5;
    }
}

g,
line,
path,
circle
{
    transition: all $duration $bezier;
    transform-origin: 2em 2em;
}

.icon
{
    width: 4em;
    height: 4em;
    margin: .5em;
    padding: .5em;
    border-radius: .1em;
    &.huge
    {
        font-size: 3em;
    }
    &:hover
    {
        line,
        path,
        circle
        {
            stroke: $magenta;
        }
        background-color: #f5f5f5;
    }
    &_container
    {
        width: 19em;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: .5em;
        margin-bottom: 2em;
        background: white;
        border-radius: .1em;
        box-shadow: 0 1em 4em -1em rgba(black, .4),
                    0 2em 5em -2em rgba(black, .2);
    }
    transition: all ($duration * 2) ease-in-out;
}

.icon-dial
{
    @for $i from 1 through 8
    {
        $minAngle: 360 / 8;
        &_dot:nth-child(#{$i})
        {
            transform: rotate(($minAngle * ($i - 1)) + deg) translateY(-1.2em);
        }
    }
    .icon-dial_dot,
    .icon-dial_mark,
    .icon-dial_center
    {
        transition-duration: $duration * 2;
    }
    .icon-dial_mark
    {
        transform: rotateZ(45deg);
    }
    &:hover .icon-dial_mark
    {
        transform: rotateZ(270deg);
    }
}

.icon-atom
{
    g
    {
        transition-duration: $duration * 4;
    }
    @for $i from 1 through 3
    {
        &_orbit:nth-of-type(#{$i})
        {
            transform: rotateZ($i * 120deg) rotateY(65deg);
        }
    }
    &:hover g
    {
        transform: rotate(360deg);
    }
}

@keyframes meridians
{

}

.icon-adjustments
{
    &_animation
    {
        circle
        {
            transform: translateY(0);
        }
        line
        {
            stroke-dasharray: 3em, 1em;
            stroke-dashoffset: 7.5em;
        }
        &:nth-child(1)
        {
            circle
            {
                transform: translateY(2.37em);
            }
            line
            {
                stroke-dashoffset: 5.13em;
            }
        }
        &:nth-child(2)
        {
            circle
            {
                transform: translateY(1.29em);
            }
            line
            {
                stroke-dashoffset: 6.21em;
            }
        }
        &:nth-child(3)
        {
            circle
            {
                transform: translateY(1.71em);
            }
            line
            {
                stroke-dashoffset: 5.79em;
            }
        }
    }
    &:hover
    {
        .icon-adjustments_animation:nth-child(1)
        {
            circle
            {
                transform: translateY(.78em);
            }
            line
            {
                stroke-dashoffset: 6.72em;
            }
        }
        .icon-adjustments_animation:nth-child(2)
        {
            circle
            {
                transform: translateY(1.86em);
            }
            line
            {
                stroke-dashoffset: 5.64em;
            }
        }
        .icon-adjustments_animation:nth-child(3)
        {
            circle
            {
                transform: translateY(.39em);
            }
            line
            {
                stroke-dashoffset: 7.11em;
            }
        }

        // randomize positions

        // @for $i from 1 through 3
        // {
        //     $amount: (random(100) / 100) * 3;
        //     .adjustments-icon_animation:nth-child(#{$i})
        //     {
        //         circle
        //         {
        //             transform: translateY($amount+em);
        //         }
        //         line
        //         {
        //             stroke-dashoffset: 7.5em - $amount;
        //         }
        //     }
        // }
    }
}

.icon-geolocation
{
    perspective: 90em;
    &_sparks
    {
        transform: translateY(1.3em) rotateX(70deg) rotateZ(180deg);
        &-item
        {
            stroke-dasharray: .3em, 1.2em;
            stroke-dashoffset: .9em;
            transform-style: preserve-3d;
        }
        @for $i from 1 through 5
        {
            &-item:nth-of-type(#{$i})
            {
                transform: rotate($i * 72deg);
            }
        }
    }
    &_marker
    {
        transform-origin: 2em 2em;
    }
    &:hover
    {
        .icon-geolocation_marker
        {
            animation: jump ($duration * 1.5) linear forwards;
        }
        .icon-geolocation_sparks-item
        {
            animation: sparks ($duration * 1.5) linear forwards;
            animation-delay: ($duration * 1.5) / 3;
        }
    }
}

@keyframes jump
{
    10%
    {
        transition-timing-function: ease-out;
    }
    30%
    {
        transform: translateY(-.7em);
        transition-timing-function: ease-in;
    }
    50%
    {
        transform: translateY(0);
        transition-timing-function: ease-out;
    }
    80%
    {
        transform: translateY(-.3em);
        transition-timing-function: ease-in;
    }
}

@keyframes sparks
{
    100%
    {
        stroke-dashoffset: 2.1em;
    }
}

.icon-aperture
{
    &_tooths
    {
        circle
        {
            stroke-dasharray: 1.44em, 8.4em;
            stroke-dashoffset: 3.6em;
        }
        @for $i from 1 through 6
        {
            circle:nth-child(#{$i})
            {
                transform: rotate($i * 60deg);
            }
        }
    }
    &:hover .icon-aperture_tooths circle
    {
        animation: aperture ($duration * 3) $bezier forwards;
    }
}

@keyframes aperture
{
    50%
    {
        stroke-dashoffset: 2.6em;
    }
}

.icon-alarm
{
    &_bells
    {
        transform: rotateZ(0);
        animation: none;
    }
    &_arms
    {
        &_long,
        &_short
        {
            transition: all $duration $bezier;
        }
        &_long
        {
            transform: rotateZ(45deg);
        }
        &_short
        {
            transform: rotateZ(-45deg);
        }
    }
    &:hover
    {
        .icon-alarm_arms
        {
            &_long
            {
                transform: rotateZ(230deg);
            }
            &_short
            {
                transform: rotateZ(-35deg);
            }
        }
        .icon-alarm_bells
        {
            transform: rotateZ(0);
            animation: ringBell ($duration * 2) linear forwards;
            animation-delay: $duration;
        }
    }
}

@keyframes ringBell
{
    12.5%
    {
        transform: rotateZ(-10deg);
        transition-timing-function: ease-out;
    }
    25%
    {
        transform: rotateZ(10deg);
        transition-timing-function: ease-in;
    }
    37.5%
    {
        transform: rotateZ(-10deg);
        transition-timing-function: ease-out;
    }
    50%
    {
        transform: rotateZ(10deg);
        transition-timing-function: ease-in;
    }
    62.5%
    {
        transform: rotateZ(-10deg);
        transition-timing-function: ease-out;
    }
    75%
    {
        transform: rotateZ(10deg);
        transition-timing-function: ease-in;
    }
    87.5%
    {
        transform: rotateZ(0);
        transition-timing-function: ease-out;
    }
}




















            
          
!
999px
Loading ..................

Console