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.

            
              .container
  %canvas
  %svg.donut{:version => "1.1", :viewbox => "0 0 241 241", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
    %defs
      %path#path-1{:d => "M119,233 C184.1696,233 237,180.841173 237,116.5 C237,52.1588266 184.1696,0 119,0 C53.8303995,0 1,52.1588266 1,116.5 C1,180.841173 53.8303995,233 119,233 Z M118.5,156 C139.762963,156 157,138.762963 157,117.5 C157,96.2370371 139.762963,79 118.5,79 C97.2370371,79 80,96.2370371 80,117.5 C80,138.762963 97.2370371,156 118.5,156 Z"}
      %filter#filter-2{:filterunits => "objectBoundingBox", :height => "200%", :width => "200%", :x => "-50%", :y => "-50%"}
        %fegaussianblur{:in => "SourceAlpha", :result => "shadowBlurInner1", :stddeviation => "1.5"}
        %feoffset{:dx => "0", :dy => "1", :in => "shadowBlurInner1", :result => "shadowOffsetInner1"}
        %fecomposite{:in => "shadowOffsetInner1", :in2 => "SourceAlpha", :k2 => "-1", :k3 => "1", :operator => "arithmetic", :result => "shadowInnerInner1"}
        %fecolormatrix{:in => "shadowInnerInner1", :type => "matrix", :values => "0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"}
    %ellipse{:cx => "113", :cy => "120", :fill => "none", :rx => "113", :ry => "113", :stroke => "#DD9275", "stroke-width" => "7"}
    %g{:fill => "none", :stroke => "none"}
      %use{:fill => "#ECB49D", "fill-rule" => "evenodd", "xlink:href" => "#path-1"}
      %use{:fill => "#000", "fill-opacity" => "1", :filter => "url(#filter-2)", "xlink:href" => "#path-1"}
    %path{:d => "M124,221 C137.277929,221 141.773891,204.292002 155,201 C168.226109,197.707998 186.751859,195.655546 197,185 C216.528404,164.695261 203.267236,161.172659 208,154 C212.714644,146.854802 214.420767,146.677165 217,143 C219.579233,139.322835 226,128.064466 226,116 C226,103.855437 211.5808,92.2181949 208,79 C204.4192,65.7818051 202.279809,56.8039376 197,50 C189.960422,40.9282984 177.187471,37.0730428 160,32 C142.812529,26.9269572 137.271803,13 124,13 C108.043377,13 93.5061332,24.1249127 78,32 C62.4938668,39.8750873 51.5448035,40.2045308 43,50 C34.6654099,59.5544877 34.1844313,68.4095357 29,79 C23.8155687,89.5904643 12,108.543282 12,122 C12,133.465306 27.5048434,146.090291 29,159 C30.4951566,171.909709 28.9885735,182.848642 38,192 C54.8279874,209.089296 67.1353622,194.870672 78,201 C88.2274016,206.769828 94.0033806,213.070053 99,216 C103.996619,218.929947 113.281965,221 124,221 Z M118.5,157 C139.762963,157 157,139.762963 157,118.5 C157,97.2370371 139.762963,80 118.5,80 C97.2370371,80 80,97.2370371 80,118.5 C80,139.762963 97.2370371,157 118.5,157 Z", :fill => "#EE468A", "fill-rule" => "evenodd", :stroke => "none"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(66.232150, 73.524770) rotate(-38.000000) translate(-66.232150, -73.524770) ", :width => "8", :x => "62.23215", :y => "62.0247696"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(49.751012, 130.792456) rotate(-86.000000) translate(-49.751012, -130.792456) ", :width => "8", :x => "45.7510125", :y => "119.292456"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(78.744553, 156.771989) rotate(-70.000000) translate(-78.744553, -156.771989) ", :width => "8", :x => "74.744553", :y => "145.271989"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(137.485341, 189.113013) rotate(34.000000) translate(-137.485341, -189.113013) ", :width => "8", :x => "133.485341", :y => "177.613013"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(194.959292, 121.004095) rotate(-60.000000) translate(-194.959292, -121.004095) ", :width => "8", :x => "190.959292", :y => "109.504095"}
    %rect.sprinkle{:fill => "#F8E81C", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(169.236859, 92.520704) rotate(-34.000000) translate(-169.236859, -92.520704) ", :width => "8", :x => "165.236859", :y => "81.0207037"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "26", :rx => "4.5", :stroke => "none", :transform => "translate(49.268695, 91.802460) rotate(38.000000) translate(-49.268695, -91.802460) ", :width => "9", :x => "44.7686945", :y => "78.8024601"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "21", :rx => "4", :stroke => "none", :transform => "translate(66.174696, 176.148730) rotate(-23.000000) translate(-66.174696, -176.148730) ", :width => "8", :x => "62.1746957", :y => "165.64873"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(109.930713, 175.031784) rotate(28.000000) translate(-109.930713, -175.031784) ", :width => "8", :x => "105.930713", :y => "163.531784"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "26", :rx => "4.5", :stroke => "none", :transform => "translate(167.552748, 175.460846) rotate(-31.000000) translate(-167.552748, -175.460846) ", :width => "9", :x => "163.052748", :y => "162.460846"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :transform => "translate(172.173218, 144.357922) rotate(72.000000) translate(-172.173218, -144.357922) ", :width => "8", :x => "168.173218", :y => "132.857922"}
    %rect.sprinkle{:fill => "#23BFC4", "fill-rule" => "evenodd", :height => "23", :rx => "4", :stroke => "none", :width => "8", :x => "185.049648", :y => "66.0146164"}
    %g.eye{:fill => "none", "fill-rule" => "evenodd", :stroke => "none", "stroke-width" => "1", :transform => "translate(76.000000, 36.000000)"}
      %ellipse.eyeBase{:cx => "20.5", :cy => "21.5", :fill => "#FFFFFF", :rx => "20.5", :ry => "20.5"}
      %ellipse.eyeLayer{:cx => "19.5", :cy => "21.5", :fill => "#7BB0E3", :rx => "12.5", :ry => "12.5"}
      %circle.eyeLayer{:cx => "19.5", :cy => "21.5", :fill => "#000000", :r => "6.5"}
      %path.eyeBase{:d => "M40.1678355,30 C36.6772011,37.094842 29.1876814,42 20.5116279,42 C11.8355749,42 4.34605553,37.0948425 0.855420943,30.0000012 L40.1678355,30 Z M41.0232558,14 C38.0375519,5.84365339 29.9813655,0 20.5116279,0 C11.0418903,0 2.98570396,5.84365339 3.30846461e-14,14 L41.0232558,14 Z", :fill => "#BE155A"}
    %g.eye{:fill => "none", "fill-rule" => "evenodd", :stroke => "none", "stroke-width" => "1", :transform => "translate(121.000000, 36.000000)"}
      %ellipse.eyeBase{:cx => "20.5", :cy => "21.5", :fill => "#FFFFFF", :rx => "20.5", :ry => "20.5"}
      %ellipse.eyeLayer{:cx => "19.5", :cy => "21.5", :fill => "#7BB0E3", :rx => "12.5", :ry => "12.5"}
      %circle.eyeLayer{:cx => "19.5", :cy => "21.5", :fill => "#000000", :r => "6.5"}
      %path.eyeBase{:d => "M40.1678355,30 C36.6772011,37.094842 29.1876814,42 20.5116279,42 C11.8355749,42 4.34605553,37.0948425 0.855420943,30.0000012 L40.1678355,30 Z M41.0232558,14 C38.0375519,5.84365339 29.9813655,0 20.5116279,0 C11.0418903,0 2.98570396,5.84365339 3.30846461e-14,14 L41.0232558,14 Z", :fill => "#BE155A"}

            
          
!
            
              body {
	background: #198AE7;
	margin: 0;
	padding: 0;
}

.container {
	position: relative;
  width: 25em;
	height: 25em;
	margin: 2em auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	animation: float ease-in-out 1.5s infinite;
}

.donut {
	position: relative;
	display: block;
	overflow: visible;
	width: 15%;
	animation: float ease-in-out 1.5s infinite, grow linear 10s forwards;
}

.eyeBase {
	animation: blink 5s linear infinite;
	transform-origin: 100%;
}

.eyeLayer {
	animation: eyeMove 5s linear infinite;
}

/* keyframes */

@keyframes float {
  0%, 100%	{
		transform: translateY(0);
	}
  50% {
		transform: translateY(1.25em);
	}
}

@keyframes grow {
	to {
		width: 65%;
	}
}

@keyframes blink { 
  0%,2%,60%,62%,100% {
		transform: scaleX(1) scaleY(1);
	} 
  1%,61% {
		transform: scaleX(1.3) scaleY(0.1);
	} 
}

@keyframes eyeMove {
	10%	{
		transform: translate(.25em);
	}
	50%	{
		transform: translate(-.1em);
	}
	60%	{
		transform: translate(.1em);
	}
	90%	{
		transform: translate(-.25em);
	}
}


            
          
!
            
              var t = 0, dim = 400
		c = document.querySelector("canvas"),	 
		$ = c.getContext('2d');
		c.width = c.height = dim;

function draw() {
		var foo, r;
		foo =  2 * Math.PI * Math.sin(t);
		$.fillStyle = 'hsla(210,84.6%,51.8%,.1)';
		$.fillRect(0, 0, c.width, c.height);

		for (var i=0; i<dim; ++i) {
				r = dim * Math.sin(i * foo);
				$.fillStyle = "#ffa500";
				$.beginPath();
				$.arc(Math.tan(i) * r + (c.width / 2), 
				Math.cos(i) * r + (c.height / 2), 1.5, 0, Math.PI * 2);
				$.fill();
		 }
		 
t += 0.000005;	
	
};

function run() {
		window.requestAnimationFrame(run);
		draw();
}

run();
            
          
!
999px
Loading ..................

Console