Chris Ember SVG

FEATURED

In this example below you will see how to do a Chris Ember SVG with some HTML / CSS and Javascript

Just a little test to get my head around how Ember is working with inline SVG.

Thumbnail
This awesome code was written by Chris Gannon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Chris Gannon ©
  • HTML
  • CSS
  • JavaScript
     <script type="text/x-handlebars">

    {{view App.SVGView elementId="svg_view"}}

  </script>


/*Downloaded from https://www.codeseek.co/chrisgannon/chris-ember-svg-aKWWma */
    body{
	background:#0070E0;
	overflow:hidden;

	width:100%;
	height:100%;
}

html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
#ember193{
  display: flex;
  align-items: center;
  justify-content: center; 
	width:100%;
	height:100%;

}
#svg_view{
	width:500px;
	height:500px;
}


/*Downloaded from https://www.codeseek.co/chrisgannon/chris-ember-svg-aKWWma */
    window.App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({

});

App.SVGView = Ember.View.extend({
  tagName: 'svg',
  attributeBindings: ['height', 'width', 'xmlns', 'version', 'viewBox'],
	viewBox:'0 0 370 370',
/*   width: '100%',
  height: '100%', */
  xmlns: 'http://www.w3.org/2000/svg',
  version: '1.1',
  render(buffer) {
    return buffer.push('<defs></defs><g id="chrisHead"><g><g><path id="chrisBody" d="M319.05,302.1S242.28,357.94,184,355.45,46.86,302.1,46.86,302.1s-12.14-35.3,24.93-81.75c20.53-25.74,65.18-51.16,110.5-51.16C293.13,169.19,319.05,302.1,319.05,302.1Z" fill="#232528"/><ellipse id="neck" cx="182.46" cy="194.73" rx="40.12" ry="25.54" fill="#b5b5b5"/></g><g opacity="0.23"><circle cx="168.29" cy="285.26" r="2.6" fill="#e9e9e9"/><circle cx="209.97" cy="285.26" r="2.6" fill="#e9e9e9"/><path d="M195.36,275.14c0,1.47-4,1.39-5,2.34s-.88,5-2.34,5-1.39-4-2.35-5-5-.87-5-2.34,4-1.39,5-2.34.88-5,2.35-5,1.38,4,2.34,5S195.36,273.69,195.36,275.14Z" fill="#e9e9e9"/><path d="M156.21,297.05c0,1.15-2.39,1.4-3.15,2.16s-1,3.15-2.17,3.15-1.39-2.38-2.16-3.15-3.15-1-3.15-2.16,2.38-1.4,3.15-2.16,1-3.15,2.16-3.15,1.4,2.38,2.17,3.15S156.21,295.9,156.21,297.05Z" fill="#e9e9e9"/><path d="M230.32,297.05c0,1.15-2.39,1.4-3.15,2.16s-1,3.15-2.17,3.15-1.39-2.38-2.16-3.15-3.15-1-3.15-2.16,2.38-1.4,3.15-2.16,1-3.15,2.16-3.15,1.4,2.38,2.17,3.15S230.32,295.9,230.32,297.05Z" fill="#e9e9e9"/><path d="M221.53,319.84h-1v-1.78c0-.13-5.26-5.87-5.26-5.87-.14-.18-8.2-16.75-27.2-16.75-19.18,0-26.74,16.59-26.89,16.76,0,0-5.3,5.75-5.3,5.87v1.77h-1c-.2,0-.36.23-.36.53v10.79c0,.3.16.53.36.53h1v1.47c0,.13,3.49,3.22,5,4.61a2.63,2.63,0,0,1,.87,2c0,2.3-.07,7,0,7.08a26.08,26.08,0,0,0,5.76,8.24,28.62,28.62,0,0,0,20.65,8.23A28.32,28.32,0,0,0,208.71,355a26.74,26.74,0,0,0,5.76-8.38c0-.05-.05-4.82-.09-7.17a2.6,2.6,0,0,1,1-2.08s5.15-4,5.15-4.16v-1.45h1c.17,0,.32-.23.34-.53v-10.8C221.87,320.05,221.72,319.84,221.53,319.84Zm-33.59,42.31c-18,0-25.31-14.37-25.31-15.67v-6.62c2,6.28,8,16.45,25.45,16.45,16.72,0,22.93-9.47,25.18-15.83v5.73C213.25,347.5,206,362.15,187.94,362.15ZM159,330.08H159a.92.92,0,0,1-.92-.92v-7.32a.92.92,0,0,1,.92-.92H159a.92.92,0,0,1,.92.92v7.31a.93.93,0,0,1-.92.93h0Zm58.18,0h-.05a.92.92,0,0,1-.92-.92v-7.32a.92.92,0,0,1,.92-.92h.05a.92.92,0,0,1,.92.92v7.31a.93.93,0,0,1-.92.93h0Z" fill="#ededed"/><path d="M187.78,301.61c-3.2,0-26-.24-26,23.55a33.91,33.91,0,0,0,.83,7.71,23.9,23.9,0,0,0,2.06,5.63C170.51,349.78,183.58,351,188,351s17.22-.93,23.14-12a24.31,24.31,0,0,0,2.12-5.58,34.16,34.16,0,0,0,.94-8.24C214.18,301,187.78,301.61,187.78,301.61Zm-10,17.11c-1.47,3.53-4.57,5.24-6.65,3.41a6.07,6.07,0,0,1-1-7.51,7.06,7.06,0,0,1,6.65-2.74c2.05.44,2.44,3.32,1,6.86Z" fill="#383838"/><path d="M211.12,339c-5.92,11.06-18.79,12-23.14,12s-17.45-1.18-23.29-12.46c9.72-3.25,20.44-3.18,23-3.18C187.68,335.35,200,335.16,211.12,339Z" fill="#3f3f3f"/></g></g><circle id="outline" cx="183.95" cy="183.95" r="171.49" fill="none" stroke="#eaf6ff" stroke-miterlimit="10" stroke-width="24.93"/><g id="wholeHead"><ellipse id="earL" cx="124.72" cy="106.17" rx="19.74" ry="18.77" fill="#ccc"/><ellipse id="earR" cx="232.31" cy="106.17" rx="19.74" ry="18.77" fill="#b5b5b5"/><path id="face" d="M240.88,90.43c0-42.2-26.43-76.41-59-76.41s-59.05,34.21-59.05,76.41c0,0-6.58,7.51,1,47.13,5,26.52,25.93,62.68,58.55,62.72s55-33.5,59.69-62.57C248.15,99.41,240.88,90.43,240.88,90.43Z" fill="#d4d4d4"/><path id="mouth" d="M204.89,141.4a13.15,13.15,0,0,1-26.3,0Z" fill="#fff"/><path id="hair" d="M182.29,40.26C225,42.34,240.67,66.18,240.67,87.4v32.47l3.7-2.69c.6-8.86-1.16-70.52-1.16-70.52C243.18,23.16,226.4,4,203,4c-12.06,0-13.15,5.08-18,5.08S179.05,4,167,4c-23.43,0-45.58,19.17-45.61,42.67,0,0-1.76,61.66-1.16,70.52l6.39,2.69V87.4C126.62,66.17,139.64,42.34,182.29,40.26Z" fill="#232528"/><path id="quiff" d="M144.46,46.71c0,13.61,21.06,18.22,42.87,24.63,8.47,2.5,43.09-1.1,39.19-3.7l-25-9.16a1.46,1.46,0,0,1,.16-2.79c8.54-2,28.56-4.87,28.56-9,0-13.61-19.2-24.64-42.87-24.64S144.46,33.11,144.46,46.71Z" fill="#232528"/><g id="eyes"><ellipse cx="163.03" cy="104.21" rx="4.91" ry="4.27" fill="#363636"/><ellipse cx="214.67" cy="104.3" rx="4.91" ry="4.27" fill="#363636"/></g><path id="nose" d="M199.41,124.18v.62c.64,8.44-14.89,8.84-15.32,0C183.24,125.37,197,130.61,199.41,124.18Z" fill="#b5b5b5"/><path class="eyebrow" d="M148.75,96.36s10.19-8.62,18.38-9" fill="none" stroke="#333" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4.27"/><path class="eyebrow" d="M209.11,81.44s13.29,1.2,19.29,6.79" fill="none" stroke="#333" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4.27"/></g></g>');
  },
	didInsertElement(){
		let tl = new TimelineMax({repeat:-1, repeatDelay:3});
		tl.to('#wholeHead', 0.7, {
			rotation:6,
			transformOrigin:'50% 100%',
			ease:Elastic.easeOut.config(0.6,0.9)
		})
		.from('#quiff', 0.7, {
			rotation:-6,
			//repeat:1,
			ease:Elastic.easeOut.config(0.96,0.49),
			yoyoEase:Elastic.easeOut.config(0.96,0.49)
		},'-=0.7')
.to('#wholeHead',1, {
			rotation:-7,
			transformOrigin:'50% 100%',
			ease:Elastic.easeOut.config(0.6,0.9)
		},'+=1')
		.to('#quiff', 0.7, {
			rotation:-6,
			//repeat:1,
			ease:Elastic.easeOut.config(0.96,0.49),
			yoyoEase:Elastic.easeOut.config(0.96,0.49)
		},'-=1')		
		.to('#eyes *', 0.1, {
			scaleY:0.3,
			repeat:1,
			transformOrigin:'50% 50%',
			yoyoEase:Power2.easeOut
		})		
		.to('.eyebrow ', 0.3, {
			y:-4,
			repeat:1,
			transformOrigin:'50% 50%',
			yoyoEase:Power2.easeOut
		},'-=0.1')		
		.to('#mouth', 0.2, {
			transformOrigin:'50% 50%',
			repeat:1,
			yoyoEase:Sine.easeOut,
			scaleX:0.4,
			repeatDelay:0.3,
			fill:'#b5b5b5'
		},'-=0.6')
.to('#wholeHead', 1.6, {
			rotation:0,
			transformOrigin:'50% 100%',
			ease:Elastic.easeOut.config(0.6,0.6)
		})		
		
		//ScrubGSAPTimeline(tl);
		

	}
	
});


Comments