Skip to content

Instantly share code, notes, and snippets.

@yarigpopov
Created June 14, 2018 08:50
Show Gist options
  • Save yarigpopov/8f846b8389dcff1b99518ea6ce506eeb to your computer and use it in GitHub Desktop.
Save yarigpopov/8f846b8389dcff1b99518ea6ce506eeb to your computer and use it in GitHub Desktop.
SVG demo
import Ember from 'ember';
import { TimelineMax, TweenMax, easing } from 'gsap';
const { Power2, Back, Elastic } = easing;
export default Ember.Component.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',
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
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;
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{svg-face}}
<br>
<br>
<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>
{
"version": "0.14.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "2.18.2",
"ember-template-compiler": "2.18.2",
"ember-testing": "2.18.2"
},
"addons": {
"ember-data": "2.18.2",
"ember-gsap": "1.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment