Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              .note
  .pin
  %p Thanks for your message!
  %svg{:version => "1.1", :viewbox => "0 0 169 100", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
    %path.letterA{:d => "M156,57.9960933 C154.954818,56.4417196 151.494183,55.8055736 150.811868,56 C147.670922,56 139.145076,60.1685569 135.815674,62.9535285 C132.486272,65.7385 129.701342,69.287715 127.460801,73.60128 C125.22026,77.9148449 124.100006,82.0398913 124.100006,85.9765428 C124.100006,88.8662125 124.791004,91.1695379 126.17302,92.886588 C127.555036,94.6036382 129.439575,95.4621503 131.826693,95.4621503 C135.805224,95.4621503 139.972149,92.6981599 144.327593,87.1700961 C146.783959,84.0402099 155,58.8895132 155,57.9960933 C155,57.1026733 150.728231,75.247487 150.811868,75.0530875 L150.044085,79.1921348 C149.038982,83.9244924 148.536439,86.9606941 148.536439,88.3008307 C148.536439,90.1435187 149.028513,91.7663161 150.012676,93.1692717 C150.996839,94.5722273 152.158971,95.2736946 153.499108,95.2736946 C154.378572,95.2736946 155.415069,94.7606812 156.608628,93.734639 C157.802187,92.7085969 159.508742,90.9182849 161.728343,88.3636493 L166.000008,83.0938674"}
    %path.letterN{:d => "M90.3699245,61 L84,93.0256233 C85.7678852,87.2599695 88.9556164,79.3029834 90.3699245,76.0451546 C91.7842327,72.7873258 93.5741897,69.49439 95.7398491,66.1662483 C100.203759,59.2287136 103.960459,55.7599983 107.010061,55.7599983 C107.849807,55.7599983 108.512754,56.0178082 108.998922,56.5334358 C109.48509,57.0490634 109.728171,57.7990559 109.728171,58.7834358 C109.728171,59.7209405 109.551385,61.3615491 109.197808,63.7053108 L106.612289,78.6115608 C106.081923,81.5647006 105.816745,83.7912408 105.816745,85.2912483 C105.816745,87.4943843 106.291857,89.3342097 107.242095,90.8107796 C108.192333,92.2873495 109.35249,93.0256233 110.722602,93.0256233 C111.739136,93.0256233 112.844047,92.4748476 114.03737,91.3732796 C115.230692,90.2717116 119.60618,85.0099983 119.60618,85.0099983 L126,75.2521858"}
    %path.letterI{:d => "M71.2943726,57.8700027 L65.1068726,81.0028152 C64.0756174,84.7997092 63.5599976,87.8465538 63.5599976,90.1434402 C63.5599976,91.6434477 63.8178075,92.8621856 64.3334351,93.7996902 C64.8490626,94.7371949 65.5287433,95.2059402 66.3724976,95.2059402 C67.8256298,95.2059402 70.1459191,93.4715826 73.3334351,90.0028152 L91,59"}
    %path.dotI{:d => "M75.017094,40 C75.6096896,40 76.0883173,40.1823344 76.4529915,40.5470085 C76.8176656,40.9116827 77,41.3903104 77,41.982906 C77,42.5527094 76.8062697,43.0313371 76.4188034,43.4188034 C76.0313371,43.8062697 75.5641053,44 75.017094,44 C74.4928749,44 74.0256431,43.7948738 73.6153846,43.3846154 C73.2051262,42.9743569 73,42.5071251 73,41.982906 C73,41.4358947 73.1937303,40.9686629 73.5811966,40.5811966 C73.9686629,40.1937303 74.4472906,40 75.017094,40 Z"}
    %path.tBottom{:d => "M62.6159363,15.8796883 C61.7253068,20.9422136 60.7995348,25.5359176 59.8385925,29.6609383 C58.8776502,33.7859589 57.7057869,38.3445071 56.3229675,43.3367195 C54.9401481,48.328932 53.5221935,52.9812292 52.0690613,57.2937508 C50.3346776,62.4969018 48.8815671,66.5398301 47.7096863,69.422657 C46.5378054,72.3054839 45.3425049,74.8718645 44.1237488,77.1218758 C40.37373,83.9187847 36.1198663,88.9695155 31.36203,92.2742195 C26.6041937,95.5789235 21.1550295,97.2312508 15.0143738,97.2312508 C9.76434753,97.2312508 4.93627081,96.2937601 0.529998779,94.4187508"}
    %path.tLoop{:d => "M29.2584381,34.5906258 C24.7584156,34.3093744 20.8443923,33.4890701 17.5162506,32.1296883 C14.188109,30.7703065 11.6217284,28.965637 9.81703186,26.7156258 C8.01233534,24.4656145 7.11000061,21.9109526 7.11000061,19.0515633 C7.11000061,13.2859094 10.7427768,8.64533084 18.0084381,5.12968826 C24.1490938,2.1765485 33.1724411,0.700000763 45.0787506,0.700000763 C48.3131418,0.700000763 52.4498192,0.887498888 57.4889069,1.26250076 C62.5279946,1.63750264 67.7427862,2.11796658 73.1334381,2.70390701 C78.5240901,3.28984744 83.0006078,3.91093498 86.5631256,4.56718826 L87.8287506,4.77812576"}

            
          
!

CSS

            
              @import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

body {
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/fabric.png');
}

.note {
  color: #333;
  width: 19.5em;
	height: 15.5em;
  padding: 1.5em;
	margin: 3em auto;
	background: #fff;
	// For Post-it uncomment below and remove pin
	// background: #eae672;
  transform: rotate(2deg);
  box-shadow: 0 .625em .625em .125em rgba(0,0,0,0.3);
}
 
p  {
	font-family: 'Permanent Marker', cursive;
  font-size: 1.5em;
	text-align: center;
}

.pin {
	position: absolute;
  background-color: #aaa;
	width: .125em;
  height: 2em;
	top: -1em;
  left: 50%;
  z-index: 1;
	&:before, &:after {
		content: '';
		position: absolute;
	}
	&:before {
 	 	height: 1.5em;
 	 	width: .125em;
		top: .5em;
		left: 0;
		background-color: hsla(0,0%,0%,0.1);
  	box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
  	transform: rotate(57.5deg);
  	transform-origin: 50% 100%;
	}
	&:after {
  	height: .75em;
		width: .75em;
		top: -.65em;
		left: -.3em;
	 	background-color: #A31;
  	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
  	border-radius: 50%;
  	box-shadow: inset 0 0 0 .06em hsla(0,0%,0%,.1),
     	  	      inset .2em .2em .2em hsla(0,0%,100%,.2),
      	        inset -.2em -.2em .2em hsla(0,0%,0%,.2),
              	1.5em 1.25em .2em hsla(0,0%,0%,.15);
		}	
}

svg {
	width: 50%;
	display: block;
	margin: auto;
	margin-top: -.5em;
	overflow: visible;
}

path {
  fill: none;
	stroke: #333;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dashoffset: 0;
}

.tBottom {
  stroke-dasharray: 130;
	animation: tBottom 2s 1 ease-in-out;
}

.tLoop {
  stroke-dasharray: 130;
  animation: tLoop 2s 1 ease-in-out;
}

.letterI {
  stroke-dasharray: 90;
  animation: letterI 2s 1 ease-in;
}

.letterN {
	stroke-dasharray: 150;
  animation: letterN 2s 1 ease-in;
}

.letterA {
	stroke-dasharray: 170;
  animation: letterA 2s 1 ease-in;
}

.dotI {
	stroke-dasharray: 50;
  animation: dotI 2s 1 ease-in;
}

@keyframes tBottom {
    0% {
        stroke-dashoffset: 130;
    }
    20% {
        stroke-dashoffset: 0;
    }
}

@keyframes tLoop {
    0%, 25%  {
        stroke-dashoffset: 130;
    }
    45% {
        stroke-dashoffset: 0;
    }
}

@keyframes letterI {
    0%, 50% {
        stroke-dashoffset: 90;
    }
    60% {
        stroke-dashoffset: 0;
    }
}

@keyframes letterN {
    0%, 60% {
        stroke-dashoffset: 150;
    }
    70% {
        stroke-dashoffset: 0;
    }
}

@keyframes letterA {
    0%, 70% {
        stroke-dashoffset: 170;
    }
    80% {
        stroke-dashoffset: 0;
    }
}

@keyframes dotI {
    0%, 99% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

            
          
!

JS

            
              
            
          
!
999px

Console