SVG Badge

Konstantinos-infogeek

2/27/2015 - 8:41 PM

EaRQaE.markdown

Rendered
Source

SVG BADGE

Forked from Dan Denney's Pen zJyDx.

A Pen by Konstantinos Tsatsarounos on CodePen.

License.

index.haml

.path-html-css
  %svg.badge{:height => "250", :width => "250", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :viewBox => "0 0 540.551 499.469" }
    %circle.is-transparent.to-025{:cx => "250.234", :cy => "250.234", :fill => "#00694C", :r => "249.734"}
    %circle.is-shrunk.to-380{:cx => "250.234", :cy => "250.234", :fill => "#30A480", :r => "227.031"}
    %defs.is-transparent.to-430
      %circle#a{:cx => "250.234", :cy => "250.234", :r => "227.031"}
    %clippath#b.is-transparent.to-430
      %use{:overflow => "visible", "xlink:href" => "#a"}
    %polygon.is-transparent.to-430{"clip-path" => "url(#b)", :fill => "#228063", :points => "250.234,250.234 499.969,499.969 0.5,499.969"}
    %rect.is-transparent.to-430{"clip-path" => "url(#b)", :fill => "#228063", :height => "129.732", :width => "540.551", :x => "-20.041", :y => "185.368"}
    %rect.is-transparent.to-430{"clip-path" => "url(#b)", :fill => "#70C297", :height => "108.11", :width => "540.551", :x => "-20.041", :y => "196.179"}
    %circle.is-shrunk.to-075{:cx => "250.234", :cy => "250.234", :fill => "#70C297", :r => "147.57"}
    %circle.is-transparent.to-100{:cx => "250.234", :cy => "250.234", :fill => "#00694C", :r => "124.867"}
    %g.is-transparent.to-405{:fill => "#30A480"}
      %path{:d => "M446.136 251.573l.023-.023v-.003c.715-.74.717-1.91-.003-2.63l-26.814-26.812c-.365-.367-.841-.547-1.314-.547-.478 0-.954.179-1.317.547l-.033.03c-.348.35-.546.824-.546 1.316v7.42c0 .493.198.966.546 1.316l18.046 18.045-18.046 18.048c-.348.348-.546.823-.546 1.312v7.425c0 .489.198.964.546 1.312l.033.033c.346.348.822.547 1.317.547.492 0 .963-.198 1.314-.547l26.794-26.789z"}
      %path{:d => "M54.333 251.573l-.023-.023v-.003c-.715-.74-.718-1.91.002-2.63l26.813-26.812c.365-.367.841-.547 1.315-.547.478 0 .954.179 1.317.547l.033.03c.348.35.546.824.546 1.316v7.42c0 .493-.198.966-.546 1.316l-18.045 18.045 18.045 18.048c.349.348.546.823.546 1.312v7.425c0 .489-.198.964-.546 1.312l-.033.033c-.346.348-.822.547-1.317.547-.492 0-.963-.198-1.315-.547l-26.792-26.789z"}
    %circle.is-transparent.to-250{:cx => "250.234", :cy => "250.234", :fill => "none", :r => "187.301"}
    %text.is-transparent.to-455{:transform => "matrix(.811 -.585 .585 .811 136.107 121.592)"}
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :x => "0", :y => "0"} H
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "10.819", :x => "36.307", :y => ".516"} T
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "23.112", :x => "64.068", :y => "5.026"} M
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "34.897", :x => "105.095", :y => "23.789"} L
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "43.634", :x => "128.225", :y => "40.499"} /
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "52.648", :x => "144.385", :y => "55.616"} C
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "62.61", :x => "163.089", :y => "80.61"} S
      %tspan{:fill => "#C5E3C4", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "72.016", :x => "175.89", :y => "105.67"} S
    %circle.is-transparent.to-250{:cx => "250.234", :cy => "250.234", :fill => "none", :r => "187.301"}
    %text.is-transparent.to-480{:transform => "matrix(.961 .276 -.276 .961 180.103 441.876)"}
      %tspan{:fill => "#9DD3AD", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :x => "0", :y => "0"} P
      %tspan{:fill => "#9DD3AD", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "-10.855", :x => "36.363", :y => "-.533"} A
      %tspan{:fill => "#9DD3AD", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "-21.255", :x => "75.918", :y => "-9.098"} T
      %tspan{:fill => "#9DD3AD", "font-family" => "'OpenSans-Extrabold'", "font-size" => "45.406", :rotate => "-32.105", :x => "107.963", :y => "-21.934"} H
    %defs.is-transparent.to-125
      %circle#c{:cx => "250.234", :cy => "250.234", :r => "124.867"}
    %clippath#d.is-transparent-to-250
      %use{:overflow => "visible", "xlink:href" => "#c"}
    %g.is-shrunk.to-150{"clip-path" => "url(#d)"}
      %path.is-transparent.to-170{:d => "M329.695 182.125h-158.922c-6.269 0-11.352 5.082-11.352 11.352v22.703h181.625v-22.703c.001-6.27-5.081-11.352-11.351-11.352z", :fill => "#9DD3AD"}
      %path.is-transparent.to-190{:d => "M170.773 329.695h158.922c6.269 0 11.352-5.082 11.352-11.352v-102.163h-181.625v102.164c0 6.269 5.082 11.351 11.351 11.351z", :fill => "#71C297"}
      %rect.is-transparent.to-210{:fill => "#70C297", :height => "11.352", :width => "147.57", :x => "176.449", :y => "193.477"}
      %rect.is-transparent.to-230{:fill => "#228063", :height => "22.703", :width => "73.785", :x => "176.449", :y => "227.531"}
      %line.is-transparent.to-250{:fill => "none", :stroke => "#30A480", "stroke-miterlimit" => "10", "stroke-width" => "5", :x1 => "176.449", :x2 => "250.234", :y1 => "261.586", :y2 => "261.586"}
      %line.is-transparent.to-270{:fill => "none", :stroke => "#30A480", "stroke-miterlimit" => "10", "stroke-width" => "5", :x1 => "176.449", :x2 => "250.234", :y1 => "272.938", :y2 => "272.938"}
      %line.is-transparent.to-290{:fill => "none", :stroke => "#30A480", "stroke-miterlimit" => "10", "stroke-width" => "5", :x1 => "176.449", :x2 => "250.234", :y1 => "284.289", :y2 => "284.289"}
      %line.is-transparent.to-310{:fill => "none", :stroke => "#30A480", "stroke-miterlimit" => "10", "stroke-width" => "5", :x1 => "176.449", :x2 => "227.531", :y1 => "295.641", :y2 => "295.641"}
    %rect.is-transparent.to-335{"clip-path" => "url(#d)", :fill => "#9DD3AD", :height => "147.57", :width => "34.055", :x => "272.938", :y => "227.531"}
    %rect.is-transparent.to-335{"clip-path" => "url(#d)", :fill => "#30A480", :height => "102.164", :width => "11.352", :x => "306.992", :y => "227.531"}
    %g.is-transparent.to-355
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "238.883", :y2 => "238.883"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "250.234", :y2 => "250.234"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "261.586", :y2 => "261.586"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "289.965", :y1 => "272.938", :y2 => "272.938"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "284.289", :y2 => "284.289"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "295.641", :y2 => "295.641"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "306.992", :y2 => "306.992"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "289.965", :y1 => "318.344", :y2 => "318.344"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "329.695", :y2 => "329.695"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "341.047", :y2 => "341.047"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "295.641", :y1 => "352.398", :y2 => "352.398"}
      %line{"clip-path" => "url(#d)", :fill => "none", :stroke => "#71C297", "stroke-miterlimit" => "10", "stroke-width" => "4", :x1 => "306.992", :x2 => "289.965", :y1 => "363.75", :y2 => "363.75"}

style.sass


.path-html-css
  background: mix(#71c297, #ffffff)
  bottom: 0
  box-sizing: border-box
  height: 100%
  left: 0
  padding: 20px
  position: absolute
  right: 0
  text-align: center
  top: 0
  width: 100%
  
.badge
  height: 250px
  position: relative
  top: 50%
  -webkit-transform: translateY(-50%)
  width: 250px
  
.is-transparent
  opacity: 0
  
.is-shrunk
  -webkit-transform: scale(0)
  
@keyframes toOpaque
  0%
    opacity: 0
  100%
    opacity: 1
  
@keyframes toFull
  0%
    -webkit-transform: scale(0)
    -webkit-transform-origin: 50% 50%
  100%
    -webkit-transform: scale(1)
    
@keyframes toFull--bottomRight
  0%
    -webkit-transform: scale(0)
    -webkit-transform-origin: 100% 0%
  100%
    -webkit-transform: scale(1)
  
.to-025
  animation: toOpaque ease-in 0.25s 0.25s forwards
    
.to-050
  animation: toOpaque ease-in 0.25s 0.5s forwards
    
.to-075
  animation: toFull ease-in 0.25s 0.75s forwards
    
.to-100
  animation: toOpaque ease-in 0.25s 1.0s forwards
    
.to-125
  animation: toOpaque ease-in 0.25s 1.25s forwards
    
.to-150
  animation: toFull--bottomRight ease-in 0.25s 1.5s forwards

.to-170
  animation: toOpaque ease-in 0.25s 1.5s forwards
 
.to-190
  animation: toOpaque ease-in 0.25s 1.5s forwards
    
.to-210
  animation: toOpaque ease-in 0.25s 1.5s forwards
    
.to-230
  animation: toOpaque ease-in 0.25s 2.3s forwards
    
.to-250
  animation: toOpaque ease-in 0.25s 2.5s forwards
    
.to-270
  animation: toOpaque ease-in 0.25s 2.7s forwards
    
.to-290
  animation: toOpaque ease-in 0.25s 2.9s forwards
    
.to-260
  animation: toOpaque ease-in 0.25s 2.6s forwards
    
.to-310
  animation: toOpaque ease-in 0.25s 3.1s forwards
    
.to-335
  animation: toOpaque ease-in 0.25s 3.35s forwards
    
.to-355
  animation: toOpaque ease-in 0.25s 3.55s forwards
    
.to-380
  animation: toFull ease-out 0.25s 3.8s forwards
    
.to-405
  animation: toOpaque ease-out 0.25s 4.05s forwards
    
.to-430
  animation: toOpaque ease-in 0.25s 4.3s forwards
    
.to-455
  animation: toOpaque ease-in 0.25s 4.55s forwards
    
.to-480
  animation: toOpaque ease-in 0.25s 4.80s forwards

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

SVG Badge

SVG BADGE