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.

            
              #title Expands when you hover over it

mixin leaf(link, image, title)
  .child
    a.leaf(href=link, target="_blank")
      img(src=image, alt=title)
      .glass-holder
        .counterspin
          .glass

.flower
  .inner
    .spinner
      +leaf('https://fb.me/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/58966b95c757af22cdd1b8f2d2f75aa1eae413c5/gfx/icons/fb.svg', 'Facebook')
      +leaf('https://twitter.com/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/58966b95c757af22cdd1b8f2d2f75aa1eae413c5/gfx/icons/bird.svg', 'Twitter')
      +leaf('http://www.flickr.com/photos/the-specious', 'https://rawcdn.githack.com/specious/specious.github.io/58966b95c757af22cdd1b8f2d2f75aa1eae413c5/gfx/icons/photos.svg', 'Flickr')
      +leaf('https://github.com/specious', 'https://rawcdn.githack.com/specious/specious.github.io/58966b95c757af22cdd1b8f2d2f75aa1eae413c5/gfx/icons/octocat.svg', 'GitHub')
      +leaf('https://codepen.io/tknomad', 'https://rawcdn.githack.com/specious/specious.github.io/58966b95c757af22cdd1b8f2d2f75aa1eae413c5/gfx/icons/codepen.svg', 'CodePen')
    .cover
            
          
!
            
              @import "nib"

@import 'nib/vendor'

//
// Variables
//

count = 5
diameter = 120px
distance = 1.2 // 1 = flush
tumbles = 6
swirl = 720deg // 0 = first leaf at the top; goes clockwise
time = 3.2s
spincycle = 45s
colors = #3535e0, red, #00bd00, yellow, #ebe8e8

//
// Automatic
//

dAngle = 360 / count
grow = 1 + (2 * distance)

//
// Glass cover
//

.glass
  background-image radial-gradient(circle closest-side, rgba(38, 38, 38, 0.2), rgba(0, 0, 0, 0.63))
  background-size 100% 100
  border-radius 50%
  position relative
.glass::before
  position absolute
  width 56%
  height 26%
  top 4%
  left 22%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(207, 207, 207, 0.23), rgba(30, 30, 30, 0.06))
  content ''
.glass::after
  position absolute
  width 38%
  height 19%
  bottom 3%
  left 31%
  border-radius 50%
  background-image linear-gradient(to bottom, rgba(93, 93, 93, 0.1), rgba(0, 0, 0, 0.18))
  content ''

//
// Interactive spinner
//

.flower
  width diameter
  height diameter
  border-radius 50%
  cursor pointer
  position relative
  .spinner, .inner, .counterspin
    height 100%
  .spinner
    animation spin spincycle infinite linear
  .counterspin
    animation counter-spin spincycle infinite linear
  .cover
    width diameter
    height diameter
    background-image url(https://specious.github.io/gfx/portrait.jpg)
    background-size 100%
    border-radius 50%
    box-shadow \
      0 0 2px 4px #d1d1d1, \
      0 0 20px 4px black
    position absolute
    top 0
  a
    display block
  .child
    width diameter
    height diameter
    border-radius 50%
    position absolute
    top 0
    .leaf
      height 100%
      border-radius 50%
      visibility hidden
      transition transform time ease-in-out
      img
        width 64px
        height 64px
        left 28px
        top 28px
        position absolute
        border none
    for c, i in colors
      &:nth-child({i+1})
        rot = (dAngle * i - 90)
        transform rotate((rot)deg)
        .leaf
          background-color c
          background-size 100%
          opacity 0.94
          transition transform time ease-in-out, box-shadow 0.16s ease-in-out, visibility time linear
          .glass-holder
            height 100%
            transform rotate(-(rot)deg)
  .glass
    height 100%
    transition transform time ease-in-out
  &:hover
    transform scale(grow) // zoom click area
    .inner
      transform scale(1 / grow) // but do not zoom internal elements
    .leaf
      // Expand
      visibility visible
      transform rotate(swirl) translateX(diameter * distance) rotate((tumbles * 360 + 90)deg)
      &:hover
        box-shadow 0 0 34px rgba(211, 217, 255, 1), 0 0 0 1px black, inset 0 1px 0 rgba(255, 255, 255, 0.2)
      .glass
        // Keep the glass cover stationary
        transform rotate((-1 * (swirl + tumbles * 360 + 90))deg)
@keyframes spin
  to
    transform rotate(1turn)
@keyframes counter-spin
  to
    transform rotate(-1turn)

//
// Presentation
//

html
  height 100%
  overflow hidden
body
  background-color #02102c
  background-image linear-gradient(135deg, #000080 10%, #000 90%)
  background-size cover
  overflow visible
  display flex
  align-items center
  justify-content center
  height 100%
a
  outline 0
#title
  color #ddd
  font-size 18px
  position fixed
  bottom 10px
  left 14px
            
          
!
999px
Loading ..................

Console