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 class="container">
  <h1>Happy Anniversary !!</h1>

  <div class="inner-wrapper">

    <div class="years">
      <svg width="235px" height="233px" viewBox="0 0 235 233" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Artboard-4" transform="translate(-395.000000, -182.000000)">
              <g id="Group-2" transform="translate(375.000000, 162.000000)">
                  <g id="Group" transform="translate(77.088101, 77.679152)" fill="#FFFFFF">
                      <path d="M68.9629211,120.384986 C66.1694957,120.781306 63.3146049,120.986301 60.4118993,120.986301 C27.0473286,120.986301 0,93.9025953 0,60.4931507 C0,27.0837061 27.0473286,0 60.4118993,0 C93.77647,0 120.823799,27.0837061 120.823799,60.4931507 C120.823799,73.0847377 116.981892,84.7777924 110.407853,94.4610478 C110.673239,94.2709799 110.937167,94.0787091 111.199606,93.8842497 L111.199606,93.8842497 L72.8006502,160.482644 C69.5779605,166.072013 62.4571199,167.958917 56.8930756,164.695558 C51.3302544,161.432917 49.4338158,154.255882 52.6558926,148.667575 L68.9629211,120.384986 Z M60.4118993,9.07729559 C32.053847,9.07729559 9.06510342,32.096958 9.06510342,60.4931507 C9.06510342,61.8852109 10.1920754,63.0136986 11.5822659,63.0136986 C12.9724563,63.0136986 14.0994284,61.8852109 14.0994284,60.4931507 C14.0994284,34.8810784 34.8342279,14.1183915 60.4118993,14.1183915 C61.8020898,14.1183915 62.9290618,12.9899037 62.9290618,11.5978435 C62.9290618,10.2057833 61.8020898,9.07729559 60.4118993,9.07729559 Z M61.5776081,100.172589 C83.2193006,100.172589 100.763359,82.6094241 100.763359,60.9441624 C100.763359,39.2789008 83.2193006,21.715736 61.5776081,21.715736 C39.9359157,21.715736 22.3918575,39.2789008 22.3918575,60.9441624 C22.3918575,82.6094241 39.9359157,100.172589 61.5776081,100.172589 Z M95.6913501,92.8238631 L60.4292593,154.575134 C59.7391917,155.783586 60.1581096,157.323393 61.3649386,158.014388 C62.5717676,158.705384 64.1095061,158.285903 64.7995737,157.077451 L100.061665,95.3261797 C100.751732,94.1177276 100.332814,92.5779209 99.1259852,91.8869253 C97.9191562,91.1959296 96.3814177,91.6154109 95.6913501,92.8238631 Z" id="Combined-Shape"></path>
                      <path d="M60.6650905,102.787755 C83.9923813,102.787755 102.902887,83.8518157 102.902887,60.4931507 C102.902887,37.1344857 83.9923813,18.1985463 60.6650905,18.1985463 C37.3377996,18.1985463 18.427294,37.1344857 18.427294,60.4931507 C18.427294,83.8518157 37.3377996,102.787755 60.6650905,102.787755 Z M60.4291065,97.8287671 C81.1516328,97.8287671 97.9505596,81.0072465 97.9505596,60.2568493 C97.9505596,39.5064521 81.1516328,22.6849315 60.4291065,22.6849315 C39.7065801,22.6849315 22.9076534,39.5064521 22.9076534,60.2568493 C22.9076534,81.0072465 39.7065801,97.8287671 60.4291065,97.8287671 Z" id="Combined-Shape"></path>
                  </g>
                  <text id="YEARS" opacity="0.6" font-family="OpenSans-Bold, Open Sans" font-size="11.97" font-weight="bold" fill="#FFFFFF">
                      <tspan x="119.351154" y="145.958904">YEARS</tspan>
                  </text>
                  <path d="M137.753191,111.521939 C123.054371,111.521939 111.138623,123.453714 111.138623,138.172303 M137.753191,164.822667 L137.753191,164.822667 C152.452011,164.822667 164.36776,152.890893 164.36776,138.172303" id="Oval-7" stroke="#FFFFFF" stroke-width="5.04" stroke-linecap="round" opacity="0.4"></path>
                  <g id="Group-4" stroke="#FFFFFF" stroke-width="5.04" stroke-linecap="round" opacity="0.4">
                      <path d="M65.8582638,135.567437 C65.8582638,172.594335 95.8341789,202.610567 132.811344,202.610567 L132.811344,202.610567" id="Oval-1" transform="translate(99.334804, 169.089002) rotate(6.000000) translate(-99.334804, -169.089002) "></path>
                      <path d="M214.891684,137.936002 C214.891684,95.1457843 180.249951,60.4574593 137.517207,60.4574593" id="Oval-1"></path>
                      <path d="M223.696998,157.858934 C234.685351,110.199135 205.009164,62.6434342 157.41338,51.6403027 C109.817595,40.6371713 62.3257689,70.3532713 51.3374162,118.01307 C40.3490636,165.672868 70.0252505,213.228569 117.621035,224.231701 L117.621035,224.231701" id="Oval-1"></path>
                      <path d="M225.312739,89.20469 C198.435328,40.6513421 137.339483,23.108828 88.851349,50.0223883" id="Oval-1"></path>
                      <path d="M252.044681,137.936002 C252.044681,74.5991535 200.768985,23.2544932 137.517207,23.2544932 C74.2654298,23.2544932 22.9897331,74.5991535 22.9897331,137.936002 C22.9897331,201.27285 74.2654298,252.61751 137.517207,252.61751 L137.517207,252.61751" id="Oval-1" transform="translate(137.517207, 137.936002) rotate(13.000000) translate(-137.517207, -137.936002) "></path>
                      <path d="M73.3498572,59.3039058 C30.1332564,94.3470874 23.4692346,157.836295 58.4653479,201.11102 L58.4653479,201.11102" id="Oval-1"></path>
                      <path d="M205.401625,136.675728 C205.401625,99.8298045 175.572222,69.960282 138.775788,69.960282" id="Oval-1"></path>
                      <path d="M198.877651,171.399414 L163.615561,233.150685" id="Path-4"></path>
                  </g>
              </g>
          </g>
      </g>
  </svg>
    </div>

    <div class="sparkle sparkle-1">
      <svg width="100" height="100" viewBox="0 0 100 100">
  <g class="group" opacity="0.8">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
    					  L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
            		      L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>
    </div>

    <div class="sparkle sparkle-2">
      <svg width="100" height="100" viewBox="0 0 100 100">
  <g class="group" opacity="0.8">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
    					  L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
            		      L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>
    </div>

    <div class="sparkle sparkle-3">
      <svg width="100" height="100" viewBox="0 0 100 100">
  <g class="group" opacity="0.8">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
    					  L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
            		      L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>
    </div>

  </div>

</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  background: #47cf73;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
}

.inner-wrapper {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

h1 {
  font-family: 'Raleway', sans-serif;
  padding: 50px 10px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  margin: 0;
}

.years {
  svg {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    path {
      stroke-opacity: 1;
      stroke-dashoffset: 1940;
      stroke-dasharray: 1940;
      -webkit-animation: draw 8s linear infinite;
      animation: draw 8s linear infinite;
    }
    &:hover {
      margin-top: -20px;
    }
  }
}

.sparkle {
  position: absolute;
  &.sparkle-1 {
    top: 0;
    left: 100px;
    .large {
      -webkit-animation: large 2s infinite;
      -moz-animation: large 2s infinite;
    }
    .large-2 {
      -webkit-animation: large-2 2s infinite;
      -moz-animation: large-2 2s infinite;
    }
    .small {
      -webkit-animation: small 2s infinite;
      -moz-animation: small 2s infinite;
    }
  }
  &.sparkle-2 {
    top: 0;
    right: 100px;
    .large {
      -webkit-animation: large 4.5s infinite;
      -moz-animation: large 4.5s infinite;
    }
    .large-2 {
      -webkit-animation: large-2 4.5s infinite;
      -moz-animation: large-2 4.5s infinite;
    }
    .small {
      -webkit-animation: small 3.5s infinite;
      -moz-animation: small 4.5s infinite;
    }
  }
  &.sparkle-3 {
    bottom: -100px;
    width: 100%;
    .large {
      -webkit-animation: large 3.5s infinite;
      -moz-animation: large 3.5s infinite;
    }
    .large-2 {
      -webkit-animation: large-2 3.5s infinite;
      -moz-animation: large-2 3.5s infinite;
    }
    .small {
      -webkit-animation: small 3.5s infinite;
      -moz-animation: small 3.5s infinite;
    }
  }
  svg {
    width: 100%;
  }
  .group {
    -webkit-transform: translate(42.5px, 42.5px);
    -moz-transform: translate(42.5px, 42.5px);
    transform: translate(42.5px, 42.5px);
  }
  path {
    -webkit-transform: translate(-42.50px, -42.50px);
    -moz-transform: translate(-42.50px, -42.50px);
    transform: translate(-42.50px, -42.50px);
  }
}

@-webkit-keyframes draw {
  30% {
    fill-opacity: 0;
  }
  31% {
    fill-opacity: 1;
  }
  32% {
    fill-opacity: 0;
  }
  33% {
    fill-opacity: 1;
  }
  34% {
    fill-opacity: 0;
  }
  35% {
    fill-opacity: 1;
  }
  from {
    stroke-dashoffset: 1940;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  30% {
    fill-opacity: 0;
  }
  31% {
    fill-opacity: 1;
  }
  32% {
    fill-opacity: 0;
  }
  33% {
    fill-opacity: 1;
  }
  34% {
    fill-opacity: 0;
  }
  35% {
    fill-opacity: 1;
  }
  from {
    stroke-dashoffset: 1940;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes large {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
  }
}

@-moz-keyframes large {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(1.5);
  }
}

@-webkit-keyframes large-2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(405deg) scale(1.1);
    transform: rotate(405deg) scale(1.1);
  }
}

@-moz-keyframes large-2 {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(405deg) scale(1.1);
  }
}

@-webkit-keyframes small {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(-360deg) scale(1);
    transform: rotate(-360deg) scale(1.5);
  }
}

@-moz-keyframes small {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-360deg) scale(1.5);
  }
}
            
          
!
999px
Loading ..................

Console