scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

New 3.0 Masthead

Browse source 
* intro component was changed for new banner masthead layout
* added new video component for embedding wistia (based on extension video, we should probably figure out consolidating the two)
* new and updated strings in splash/l10n.json
* updated splash presentation to move Intro above `inner` to allow it to be full width (like banners)
* new assets
This commit is contained in:
chrisgarrity 2018-12-20 07:32:03 -05:00
parent ad4442a310
commit 496fdad8be
13 changed files with 880 additions and 422 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/_colors.scss
View file

@ -47,6 +47,7 @@ $ui-light-mint: hsl(163, 53, 67);
$active-gray: hsla(0, 0, 0, .1); $active-gray: hsla(0, 0, 0, .1);
$active-dark-gray: hsla(0, 0, 0, .2); $active-dark-gray: hsla(0, 0, 0, .2);
$box-shadow-gray: hsla(0, 0, 0, .25); $box-shadow-gray: hsla(0, 0, 0, .25);
$box-shadow-light-gray: hsla(0, 0, 0, .15);
$overlay-gray: hsla(0, 0, 0, .75); $overlay-gray: hsla(0, 0, 0, .75);
$transparent-light-blue: rgba(229, 240, 254, 0); $transparent-light-blue: rgba(229, 240, 254, 0);

193
src/components/intro/intro.jsx
View file

@ -5,8 +5,9 @@ const React = require('react');
const navigationActions = require('../../redux/navigation.js'); const navigationActions = require('../../redux/navigation.js');
const IframeModal = require('../modal/iframe/modal.jsx'); const Video = require('../video/video.jsx');
const Registration = require('../registration/registration.jsx'); const FlexRow = require('../flex-row/flex-row.jsx');
const TitleBanner = require('../title-banner/title-banner.jsx');
require('./intro.scss'); require('./intro.scss');
@ -14,8 +15,7 @@ class Intro extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
bindAll(this, [ bindAll(this, [
'handleShowVideo', 'handleShowVideo'
'handleCloseVideo'
]); ]);
this.state = { this.state = {
videoOpen: false videoOpen: false
@ -24,120 +24,84 @@ class Intro extends React.Component {
handleShowVideo () { handleShowVideo () {
this.setState({videoOpen: true}); this.setState({videoOpen: true});
} }
handleCloseVideo () {
this.setState({videoOpen: false});
}
render () { render () {
return ( return (
<div className="intro"> <TitleBanner className="intro-banner">
<div className="content"> <FlexRow className="intro-container">
<h1 <FlexRow className="intro-content column">
dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger <h1 className="intro-header">
__html: this.props.messages['intro.tagLine'] <span>{this.props.messages['intro.tagLine1']}</span>
}} <br />
/> <span>{this.props.messages['intro.tagLine2']}</span>
<div className="sprites"> </h1>
<FlexRow className="intro-buttons">
<a <a
className="sprite sprite-1" className="intro-button create-button button"
href="/projects/editor/?tutorial=getStarted" href="/create"
> >
<img {this.props.messages['intro.startCreating']}
alt="Scratch Cat"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-a.png"
/>
<img
alt="Scratch Cat"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-b.png"
/>
<div className="circle" />
<div className="text">
{this.props.messages['intro.tryItOut']}
</div>
</a> </a>
<a <a
className="sprite sprite-2" className="intro-button join-button button"
href="/starter_projects/"
>
<img
alt="Tera"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-a.png"
/>
<img
alt="Tera"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-b.png"
/>
<div className="circle" />
<div className="text">
{this.props.messages['intro.seeExamples']}
</div>
</a>
<a
className="sprite sprite-3"
href="#" href="#"
onClick={this.props.handleOpenRegistration} onClick={this.props.handleOpenRegistration}
> >
<img {this.props.messages['intro.join']}
alt="Gobo"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-a.png"
/>
<img
alt="Gobo"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-b.png"
/>
<div className="circle" />
<div className="text">
{this.props.messages['intro.joinScratch']}
</div>
<div className="text subtext">{this.props.messages['intro.itsFree']}</div>
</a> </a>
<Registration </FlexRow>
key="registration"
</FlexRow>
<FlexRow className="intro-video-container">
{this.state.videoOpen ?
(
<Video
className="intro-video"
videoId="joal01i8b1"
/> />
</div> ) : (
<div <div
className="description" className="video-image"
dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger onClick={this.handleShowVideo}
__html: this.props.messages['intro.description'] >
}} <img src="/svgs/intro/video-image.svg" />
/> <a
<div className="links"> href="#"
<a href="/about/"> onClick={this.handleShowVideo}
{this.props.messages['intro.aboutScratch']} >
<div className="watch-button button">
{this.props.messages['intro.watchVideo']}
</div>
</a> </a>
<a href="/educators/"> </div>
{this.props.messages['intro.forEducators']} )
}
</FlexRow>
</FlexRow>
<FlexRow className="intro-subnav">
<a
href="/about"
>
<div className="subnav-button button">
{this.props.messages['intro.aboutScratch']}
</div>
</a> </a>
<a <a
className="last" href="/parents"
href="/parents/"
> >
<div className="subnav-button button">
{this.props.messages['intro.forParents']} {this.props.messages['intro.forParents']}
</div>
</a> </a>
<a
href="/educators"
>
<div className="subnav-button button">
{this.props.messages['intro.forEducators']}
</div> </div>
</div> </a>
<div className="video"> </FlexRow>
<div </TitleBanner>
className="play-button"
onClick={this.handleShowVideo}
/>
<img
alt="Intro Video"
src="//cdn.scratch.mit.edu/scratchr2/static/images/hp-video-screenshot.png"
/>
</div>
<IframeModal
className="mod-intro-video"
isOpen={this.state.videoOpen}
src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0"
onRequestClose={this.handleCloseVideo}
/>
</div>
); );
} }
} }
@ -148,27 +112,24 @@ Intro.propTypes = {
'intro.aboutScratch': PropTypes.string, 'intro.aboutScratch': PropTypes.string,
'intro.forEducators': PropTypes.string, 'intro.forEducators': PropTypes.string,
'intro.forParents': PropTypes.string, 'intro.forParents': PropTypes.string,
'intro.itsFree': PropTypes.string, 'intro.join': PropTypes.string,
'intro.joinScratch': PropTypes.string, 'intro.startCreating': PropTypes.string,
'intro.seeExamples': PropTypes.string, 'intro.tagLine1': PropTypes.string,
'intro.tagLine': PropTypes.string, 'intro.tagLine2': PropTypes.string,
'intro.tryItOut': PropTypes.string, 'intro.watchVideo': PropTypes.string
'intro.description': PropTypes.string
}) })
}; };
Intro.defaultProps = { Intro.defaultProps = {
messages: { messages: {
'intro.aboutScratch': 'ABOUT SCRATCH', 'intro.aboutScratch': 'About Scratch',
'intro.forEducators': 'FOR EDUCATORS', 'intro.forEducators': 'For Educators',
'intro.forParents': 'FOR PARENTS', 'intro.forParents': 'For Parents',
'intro.itsFree': 'it\'s free!', 'intro.join': 'Join',
'intro.joinScratch': 'JOIN SCRATCH', 'intro.startCreating': 'Start Creating',
'intro.seeExamples': 'SEE EXAMPLES', 'intro.tagLine1': 'Create stories, games, and animations',
'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world', 'intro.tagLine2': 'Share with others around the world',
'intro.tryItOut': 'TRY IT OUT', 'intro.watchVideo': 'Watch Video'
'intro.description': 'A creative learning community with <span class="project-count"> ' +
'over 14 million </span>projects shared'
}, },
session: {} session: {}
}; };
@ -180,7 +141,7 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
handleOpenRegistration: event => { handleOpenRegistration: event => {
event.preventDefault(); event.preventDefault();
dispatch(navigationActions.handleOpenRegistration()); dispatch(navigationActions.setRegistrationOpen(true));
} }
}); });

430
src/components/intro/intro.scss
View file

@ -1,253 +1,207 @@
@import "../../colors"; @import "../../colors";
@import "../../frameless";
.intro { .intro-banner {
display: flex; display: flex;
margin-top: 20px; flex-direction: column;
margin-bottom: 30px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: flex-start;
h1 {
line-height: 2.125rem;
color: $ui-orange;
font-size: 1.625rem;
font-weight: 400;
}
.content {
display: inline-block;
width: calc(66% - 30px);
vertical-align: top;
}
.sprites {
position: relative; position: relative;
clear: both;
margin: 20px 0;
overflow: hidden;
&:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
content: " ";
}
}
.sprite {
position: relative;
float: left;
width: 193px;
height: 136px;
overflow: hidden;
.costume,
.circle,
.text {
position: absolute;
}
.costume {
left: 0;
z-index: 2;
}
.costume-2 {
display: none;
}
.circle {
display: block;
top: 15px;
left: 43px;
z-index: 0;
border-radius: 50%;
box-shadow: 0 0 5px $ui-white;
width: 112px;
height: 112px;
}
.text {
$text-bg-color: $background-color;
left: 35px;
z-index: 1;
border: 2px solid $text-bg-color;
background-color: $text-bg-color;
padding-right: 10px;
padding-left: 40px;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
}
.subtext {
border: 0;
background-color: transparent;
text-shadow: 0;
font-size: 12px;
font-weight: 400;
}
&.sprite-1 {
.circle {
background-color: $ui-aqua;
}
.text {
top: 60px;
left: 50px;
color: $ui-aqua;
}
}
&.sprite-2 {
.circle {
background-color: $ui-purple;
}
.text {
top: 77px;
left: 50px;
color: $ui-purple;
}
}
&.sprite-3 {
.circle {
background-color: $ui-blue;
}
.text {
top: 37px;
left: 45px;
color: $ui-blue;
}
.subtext {
top: 63px;
left: 60px;
color: $ui-white;
}
}
&:hover {
.costume-1 {
display: none;
}
.costume-2 {
display: block;
}
&.sprite-1 {
.circle {
box-shadow: 0 0 10px 2px $ui-aqua;
}
}
&.sprite-2 {
.circle {
box-shadow: 0 0 10px 2px $ui-purple;
}
}
&.sprite-3 {
.circle {
box-shadow: 0 0 10px 2px $ui-blue;
}
}
}
}
.description {
margin-top: 10px;
font-size: 17px;
}
.project-count {
$project-count-color: hsl(318, 50%, 52%);
color: $project-count-color;
font-size: 18px;
font-weight: 700;
}
.links {
margin-top: 20px;
letter-spacing: .5px;
font-size: 12px;
a {
border-right: 1px solid $type-gray;
padding: 0 5px;
&:last-child { border-right: 0; }
&:first-child { padding-left: 0; }
}
}
.video {
display: inline-block;
position: relative;
border: 1px solid $ui-border;
border-radius: 10px;
background-color: $ui-white;
padding: 14px 10px;
width: 34%;
height: 208px;
text-align: center;
img {
border-radius: 5px;
}
}
.play-button {
display: block;
top: calc(50% - 25px);
left: calc(50% - 35px);
opacity: .8;
border: 5px solid $ui-border;
border-radius: 20px;
background-color: $type-gray;
width: 70px;
height: 50px;
&,
&:after {
position: absolute;
margin: 0;
cursor: pointer;
padding: 0; padding: 0;
justify-content: space-between;
background-color: $ui-white;
.intro-container {
min-height: 24rem;
justify-content: space-between;
background-color: $ui-blue;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
background-image: url("/svgs/intro/background-cropped.svg");
}
/* flex: column */
.intro-content {
flex: 1;
justify-content: center;
align-items: flex-start;
margin-left: 5%;
min-height: 20rem;
}
.intro-video-container {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 29rem;
.intro-video {
margin-right: 4rem;
}
.video-image {
position: relative;
cursor: pointer;
margin-right: 4rem;
.watch-button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 4px;
background-color: rgba(0,0,0,0.15);
box-shadow: 0 0 0 4px rgba(0,0,0,0.15);
color: $ui-white;
padding: .625rem .75rem;
font-size: 1rem;
}
} }
&:after { &:after {
$play-arrow: rgba(255, 255, 255, 0); display: block;
top: 37px; position: absolute;
left: 28px; bottom: .75rem;
margin-top: -30px; right: 10%;
border: solid transparent; background-image: url("/svgs/intro/hat-block.svg");
border-width: 18px; background-repeat: no-repeat;
border-color: $play-arrow; width: 122px;
border-left-color: $ui-white; height: 81px;
width: 0; content: "";
height: 0; }
content: " "; }
pointer-events: none;
.intro-header {
margin-bottom: .75rem;
font-size: 2rem;
color: $ui-white;
line-height: 1.5em;
}
.intro-button {
border-radius: 4px;
background-color: $ui-white;
color: $ui-blue;
padding: .625rem .75rem;
font-size: 1rem;
margin-right: .75rem;
&.create-button:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("/svgs/intro/create.svg");
width: 1.5rem;
height: 1.5rem;
vertical-align: -.35rem;
content: "";
}
&.join-button:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("/svgs/intro/join.svg");
width: 1.5rem;
height: 1.5rem;
vertical-align: -.35rem;
content: "";
}
}
.intro-subnav {
justify-content: center;
background-color: $ui-blue-10percent;
.subnav-button {
margin: .625rem .5rem;
padding: .5rem 1.5rem;
border-radius: 1.5rem;
} }
} }
} }
.modal-content.mod-intro-video { $rowLayoutMin: 900px;
padding: 15px; $tabletPortrait: 768px;
width: 35.625rem; $tabletLandscape: 1024px;
// $desktop: 942px;
// $tablet: 640px; (should be renamed)
// $mobile: 480px;
@media only screen and (min-width: $rowLayoutMin) and (max-width: $tabletLandscape - 1) {
.intro-banner {
.intro-header {
max-width: 22rem;
text-align: left; // override #view text centering
}
}
} }
.modal-content-iframe.mod-intro-video { @media only screen and (min-width: $mobile) and (max-width: $rowLayoutMin - 1) {
width: 35.625rem; .intro-banner {
min-height: 22.3125rem; justify-content: flex-start;
.intro-header {
margin-top: 1.75rem;
font-size: 1.5rem;
}
.intro-container {
flex-direction: column;
background-position: bottom 32px right 50%;
background-size: 40rem;
background-image: url("/svgs/intro/background.svg");
.intro-content {
align-items: center;
min-height: 8rem;
margin: 0;
}
}
.intro-video-container {
flex: 0 0 24rem;
.video-image,
.video-player {
margin: 0;
}
&:after {
display: none;
}
}
}
}
@media #{$medium-and-smaller} {
.intro-buttons,
.intro-subnav {
flex-direction: row; // override flexrow default
}
}
@media only screen and (max-width: $mobile - 1) {
.intro-banner {
.intro-container {
background-image: none;
.intro-content.column {
margin: auto 5%;
align-items: center;
}
.intro-header {
font-size: 1.5rem;
}
.intro-video-container {
display: none;
}
}
}
} }

40
src/components/video/video.jsx Normal file
View file

@ -0,0 +1,40 @@
const PropTypes = require('prop-types');
const React = require('react');
const classNames = require('classnames');
require('./video.scss');
const Video = props => (
<div className={classNames('video-player', props.className)}>
<iframe
allowFullScreen
// allowFullScreen is legacy, can we start using allow='fullscreen'?
// allow="fullscreen"
frameBorder="0" // deprecated attribute
height={props.height}
scrolling="no" // deprecated attribute
src={`https://fast.wistia.net/embed/iframe/${props.videoId}?seo=false&videoFoam=true`}
title={props.title}
width={props.width}
/>
<script
async
src="https://fast.wistia.net/assets/external/E-v1.js"
/>
</div>
);
Video.defaultProps = {
height: '225',
title: '',
width: '400'
};
Video.propTypes = {
className: PropTypes.string,
height: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
videoId: PropTypes.string.isRequired,
width: PropTypes.string.isRequired
};
module.exports = Video;

9
src/components/video/video.scss Normal file
View file

@ -0,0 +1,9 @@
@import "../../colors";
@import "../../frameless";
.video-player {
border: .25rem solid $box-shadow-light-gray;
border-radius: .75rem;
height: 225px;
overflow: hidden;
}

19
src/views/splash/l10n.json
View file

@ -18,17 +18,14 @@
"messages.remixText": "{profileLink} remixed {remixedProjectLink} as {projectLink}", "messages.remixText": "{profileLink} remixed {remixedProjectLink} as {projectLink}",
"messages.shareText": "{profileLink} shared the project {projectLink}", "messages.shareText": "{profileLink} shared the project {projectLink}",
"intro.aboutScratch": "ABOUT SCRATCH", "intro.aboutScratch": "About Scratch",
"intro.forEducators": "FOR EDUCATORS", "intro.forEducators": "For Educators",
"intro.forParents": "FOR PARENTS", "intro.forParents": "For Parents",
"intro.itsFree": "it's free!", "intro.join": "Join",
"intro.joinScratch": "JOIN SCRATCH", "intro.startCreating": "Start Creating",
"intro.seeExamples": "SEE EXAMPLES", "intro.tagLine1": "Create stories, games, and animations",
"intro.tagLine": "Create stories, games, and animations<br /> Share with others around the world", "intro.tagLine2": "Share with others around the world",
"intro.tryItOut": "TRY IT OUT", "intro.watchVideo": "Watch Video",
"intro.description": "A creative learning community with <span class=\"project-count\"> {value} </span>projects shared",
"intro.defaultDescription": "A creative learning community with <span class=\"project-count\"> over 20 million </span>projects shared",
"news.scratchNews": "Scratch News", "news.scratchNews": "Scratch News",
"teacherbanner.greeting": "Hi", "teacherbanner.greeting": "Hi",

48
src/views/splash/presentation.jsx
View file

@ -375,7 +375,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
const featured = this.renderHomepageRows(ShowMiddleBanner); const featured = this.renderHomepageRows(ShowMiddleBanner);
const formatHTMLMessage = this.props.intl.formatHTMLMessage; const formatHTMLMessage = this.props.intl.formatHTMLMessage;
const formatNumber = this.props.intl.formatNumber;
const formatMessage = this.props.intl.formatMessage; const formatMessage = this.props.intl.formatMessage;
const messages = { const messages = {
'general.viewAll': formatMessage({id: 'general.viewAll'}), 'general.viewAll': formatMessage({id: 'general.viewAll'}),
@ -387,23 +386,17 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
'intro.aboutScratch': formatMessage({id: 'intro.aboutScratch'}), 'intro.aboutScratch': formatMessage({id: 'intro.aboutScratch'}),
'intro.forEducators': formatMessage({id: 'intro.forEducators'}), 'intro.forEducators': formatMessage({id: 'intro.forEducators'}),
'intro.forParents': formatMessage({id: 'intro.forParents'}), 'intro.forParents': formatMessage({id: 'intro.forParents'}),
'intro.itsFree': formatMessage({id: 'intro.itsFree'}), 'intro.join': formatMessage({id: 'intro.join'}),
'intro.joinScratch': formatMessage({id: 'intro.joinScratch'}), 'intro.startCreating': formatMessage({id: 'intro.startCreating'}),
'intro.seeExamples': formatMessage({id: 'intro.seeExamples'}), 'intro.tagLine1': formatHTMLMessage({id: 'intro.tagLine1'}),
'intro.tagLine': formatHTMLMessage({id: 'intro.tagLine'}), 'intro.tagLine2': formatHTMLMessage({id: 'intro.tagLine2'}),
'intro.tryItOut': formatMessage({id: 'intro.tryItOut'}), 'intro.watchVideo': formatMessage({id: 'intro.watchVideo'}),
'teacherbanner.greeting': formatMessage({id: 'teacherbanner.greeting'}), 'teacherbanner.greeting': formatMessage({id: 'teacherbanner.greeting'}),
'teacherbanner.subgreeting': formatMessage({id: 'teacherbanner.subgreeting'}), 'teacherbanner.subgreeting': formatMessage({id: 'teacherbanner.subgreeting'}),
'teacherbanner.classesButton': formatMessage({id: 'teacherbanner.classesButton'}), 'teacherbanner.classesButton': formatMessage({id: 'teacherbanner.classesButton'}),
'teacherbanner.resourcesButton': formatMessage({id: 'general.resourcesTitle'}), 'teacherbanner.resourcesButton': formatMessage({id: 'general.resourcesTitle'}),
'teacherbanner.faqButton': formatMessage({id: 'teacherbanner.faqButton'}) 'teacherbanner.faqButton': formatMessage({id: 'teacherbanner.faqButton'})
}; };
if (this.props.projectCount === 20000000) {
messages['intro.description'] = formatHTMLMessage({id: 'intro.defaultDescription'});
} else {
const count = formatNumber(this.props.projectCount);
messages['intro.description'] = formatHTMLMessage({id: 'intro.description'}, {value: count});
}
return ( return (
<div className="splash"> <div className="splash">
@ -445,13 +438,20 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length === 0 && // if user is not logged in Object.keys(this.props.user).length === 0 && // if user is not logged in
ShowTopBanner && (ShowTopBanner ? [
<MediaQuery <MediaQuery
key="frameless-tablet" key="frameless-tablet"
minWidth={0} minWidth={0}
> >
<TopBanner actionLink="/create" /> <TopBanner actionLink="/create" />
</MediaQuery> </MediaQuery>
] : [
<Intro
key="intro"
messages={messages}
/>
]
)
} }
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
@ -471,8 +471,9 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
className="inner mod-splash" className="inner mod-splash"
key="inner" key="inner"
> >
{this.props.sessionStatus === sessionActions.Status.FETCHED ? ( {
Object.keys(this.props.user).length > 0 ? [ this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length > 0 && // user is logged in
<div <div
className="splash-header" className="splash-header"
key="header" key="header"
@ -496,22 +497,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
messages={messages} messages={messages}
/> />
</div> </div>
] : [
<MediaQuery
key="frameless-desktop"
minWidth={frameless.desktop}
>
{
!ShowTopBanner && // show intro if not showing top banner
<Intro
key="intro"
messages={messages}
projectCount={this.props.projectCount}
/>
}
</MediaQuery>
]) : []
} }
{featured} {featured}
@ -610,7 +595,6 @@ SplashPresentation.propTypes = {
onOpenAdminPanel: PropTypes.func.isRequired, onOpenAdminPanel: PropTypes.func.isRequired,
onRefreshHomepageCache: PropTypes.func.isRequired, onRefreshHomepageCache: PropTypes.func.isRequired,
onShowEmailConfirmationModal: PropTypes.func.isRequired, onShowEmailConfirmationModal: PropTypes.func.isRequired,
projectCount: PropTypes.number,
refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
sessionStatus: PropTypes.string.isRequired, sessionStatus: PropTypes.string.isRequired,
sharedByFollowing: PropTypes.arrayOf(PropTypes.object), sharedByFollowing: PropTypes.arrayOf(PropTypes.object),

144
static/svgs/intro/background-cropped.svg Normal file
View file

@ -0,0 +1,144 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="624px" height="325px" viewBox="0 0 624 325" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>background</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M14.5241774,3.20760789 L55.4279804,0.408844227 C55.7934597,24.6663719 52.0706428,37.4964514 44.2595295,38.8990826 C32.5428596,41.0030294 38.750069,35.2465596 29.4537632,38.8990826 C20.1574574,42.5516055 22.4253297,34.9448108 17.2161787,36.9416571 C12.0070276,38.9385034 -5.50698389,40.3280372 2.40338083,32.6024943 C10.6906189,24.5088835 14.7308844,14.710588 14.5241774,3.20760789 Z" id="path-1"></path>
<path d="M20.9123655,58.6008461 L0.431741793,58.6008461 C0.431741793,58.0180672 0.431741793,56.3303192 0.431741793,53.537602 C0.431741793,45.9143265 15.6791033,47.605026 15.6791033,37.2133454 C15.6791033,26.8216647 11.3430974,25.1507095 11.3430974,15.5485612 C11.3430974,10.1221762 12.9645554,0.208160149 20.9035733,0.200846078 C28.8425902,0.208160149 30.4640481,10.1221762 30.4640481,15.5485612 C30.4640481,25.1507095 26.1280422,26.8216647 26.1280422,37.2133454 C26.1280422,47.605026 41.3754038,45.9143265 41.3754038,53.537602 C41.3754038,56.3303192 41.3754038,58.0180672 41.3754038,58.6008461 L20.9123655,58.6008461 Z M21.2088857,14.1126327 C22.9606064,14.1126327 24.3806566,12.32816 24.3806566,10.1269013 C24.3806566,7.92564269 22.9606064,6.14116998 21.2088857,6.14116998 C19.457165,6.14116998 18.0371148,7.92564269 18.0371148,10.1269013 C18.0371148,12.32816 19.457165,14.1126327 21.2088857,14.1126327 Z" id="path-3"></path>
</defs>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="V4_Logged-out-(Video-Button)" transform="translate(-656.000000, -71.000000)">
<g id="Masthead" transform="translate(0.000000, 48.000000)">
<g id="Call-to-Action" transform="translate(122.000000, 12.000000)">
<g id="Video-Illustration" transform="translate(533.000000, 0.000000)">
<g id="background">
<path d="M472.338333,104.593072 C488.221485,134.757488 441.56795,149.119847 506.083023,150.747079 C570.598096,152.374311 586.479005,169.861791 576.058279,195.998966 C565.637554,222.136141 438.09288,190.61679 444.5445,223.477341 C450.996119,256.337892 549.755524,228.405167 541.31879,281.381754 C532.882057,334.358342 419.729458,275.003211 341.264381,314.764768 C262.799305,354.526325 115,334.476673 115,287.474026 C115,240.47138 192.435065,260.35028 192.435065,236.286617 C192.435065,212.222955 115,234.059895 115,191.218902 C115,148.377909 245.040577,189.232437 245.040577,157.875632 C245.040577,126.518828 147.770008,154.333498 147.770008,115.857707 C147.770008,77.3819163 227.670833,101.019115 232.137338,82.4510747 C236.603844,63.8830341 205.834583,72.8985963 212.78248,46.3674663 C224.480741,1.69667929 482.757938,-6.38135329 422.70825,55.6975767 C387.454346,92.1428049 456.455182,74.4286554 472.338333,104.593072 Z M74.1292601,251.250509 C107.272104,259.63376 74.1292601,320.63497 46.5102238,299.621867 C18.8911875,278.608763 40.9864166,242.867258 74.1292601,251.250509 Z M89.6037252,206.726385 C111.816812,212.466923 109.852371,246.729593 84.6274561,238.821226 C59.4025409,230.912859 67.3906385,200.985846 89.6037252,206.726385 Z M580.603725,260.726385 C602.816812,266.466923 600.852371,300.729593 575.627456,292.821226 C550.402541,284.912859 558.390639,254.985846 580.603725,260.726385 Z M467.154629,32.325099 C501.495856,-1.39185926 623.432095,15.3005855 618.875621,50.9645059 C614.319147,86.6284264 568.187513,53.4138894 565.699018,75.4606194 C563.210524,97.5073495 595.063255,78.1763147 595.063255,102.086796 C595.063255,125.997278 504.482049,135.252415 504.482049,104.370381 C504.482049,87.2942566 521.901512,88.8587119 527.3762,85.118075 C532.850889,81.377438 539.767464,65.9219018 513.363447,66.2760944 C473.624716,66.8091635 446.373848,52.7281196 467.154629,32.325099 Z" id="Combined-Shape" fill-opacity="0.15" fill="#000000"></path>
<g id="Command-Block-Copy" transform="translate(33.886639, 269.719246) rotate(10.000000) translate(-33.886639, -269.719246) translate(2.386639, 253.219246)">
<path d="M62.3054187,6.06828287 L62.3054187,25.5353343 C62.3054187,26.8752112 61.231518,27.9626475 59.9083189,27.9626475 L34.5038549,27.9626475 C33.8662264,27.9626475 33.257363,28.2150881 32.8115024,28.6714229 L29.4651511,32.0599521 C29.0192905,32.5114323 28.4104272,32.7687275 27.7727986,32.7687275 L15.3749983,32.7687275 C14.7421639,32.7687275 14.1333006,32.5114323 13.6778516,32.0599521 L10.3410887,28.6714229 C9.89043389,28.2150881 9.27677633,27.9626475 8.64394198,27.9626475 L2.39709983,27.9626475 C1.07390072,27.9626475 0,26.8752112 0,25.5353343 L0,6.06828287 C0,4.72840602 1.07390072,3.64096972 2.39709983,3.64096972 L8.59599998,3.64096972 C9.23362854,3.64096972 9.84249189,3.89826492 10.2883525,4.34974516 L13.6778516,7.78682058 C14.1333006,8.23830083 14.7421639,8.49559602 15.3749983,8.49559602 L27.7727986,8.49559602 C28.4104272,8.49559602 29.0192905,8.23830083 29.4651511,7.78682058 L32.8546502,4.34974516 C33.3100992,3.89826492 33.9189626,3.64096972 34.5517969,3.64096972 L59.9083189,3.64096972 C61.231518,3.64096972 62.3054187,4.72840602 62.3054187,6.06828287" id="Fill-6-Copy" fill="#855CD6"></path>
<path d="M62.3054187,21.8943646 C62.3054187,23.2342415 61.231518,24.3216778 59.9083189,24.3216778 L34.5038549,24.3216778 C33.8662264,24.3216778 33.257363,24.5741183 32.8115024,25.0304532 L29.4651511,28.4189824 C29.0192905,28.8704626 28.4104272,29.1277578 27.7727986,29.1277578 L15.3749983,29.1277578 C14.7421639,29.1277578 14.1333006,28.8704626 13.6778516,28.4189824 L10.3410887,25.0304532 C9.89043389,24.5741183 9.27677633,24.3216778 8.64394198,24.3216778 L2.39709983,24.3216778 C1.07390072,24.3216778 0,23.2342415 0,21.8943646 L0,2.42731315 C0,1.08743629 1.07390072,0 2.39709983,0 L8.59599998,0 C9.23362854,0 9.84249189,0.257295194 10.2883525,0.70877544 L13.6778516,4.14585086 C14.1333006,4.59733111 14.7421639,4.8546263 15.3749983,4.8546263 L27.7727986,4.8546263 C28.4104272,4.8546263 29.0192905,4.59733111 29.4651511,4.14585086 L32.8546502,0.70877544 C33.3100992,0.257295194 33.9189626,0 34.5517969,0 L59.9083189,0 C61.231518,0 62.3054187,1.08743629 62.3054187,2.42731315 L62.3054187,21.8943646 Z" id="Fill-6" fill="#9966FF"></path>
</g>
<g id="Piano" transform="translate(609.946690, 219.221859) rotate(5.000000) translate(-609.946690, -219.221859) translate(531.446690, 187.721859)" stroke-linecap="round" stroke-linejoin="round">
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#000000" stroke-width="0.687022901" fill="#000000" opacity="0.1" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.55222331" y="50.8319646" width="143.704433" height="9.03782646"></rect>
<g id="Group" transform="translate(5.554639, 18.433690)">
<g opacity="0.15" transform="translate(0.000000, 2.954367)" fill="#000000" id="Path" stroke="#000000" stroke-width="3.4351145">
<path d="M59.5042802,36.1036995 L64.8266667,36.1036995 C65.9975917,36.1036995 66.9556212,35.1510638 66.9556212,33.9867312 L66.9556212,0.00938897022 L57.3753257,0.00938897022 L57.3753257,33.9867312 C57.3753257,35.1510638 58.3333552,36.1036995 59.5042802,36.1036995 Z"></path>
<path d="M50.0304324,36.1036995 L55.3528188,36.1036995 C56.5237438,36.1036995 57.4817734,35.1510638 57.4817734,33.9867312 L57.4817734,0.00938897022 L47.9014778,0.00938897022 L47.9014778,33.9867312 C47.9014778,35.1510638 48.8595074,36.1036995 50.0304324,36.1036995 Z"></path>
<path d="M40.4501368,36.1036995 L45.7725233,36.1036995 C46.9434483,36.1036995 47.9014778,35.1510638 47.9014778,33.9867312 L47.9014778,0.00938897022 L38.3211823,0.00938897022 L38.3211823,33.9867312 C38.3211823,35.1510638 39.2792118,36.1036995 40.4501368,36.1036995 Z"></path>
<path d="M30.8698413,36.1036995 L36.1922277,36.1036995 C37.3631527,36.1036995 38.3211823,35.1510638 38.3211823,33.9867312 L38.3211823,0.00938897022 L28.7408867,0.00938897022 L28.7408867,33.9867312 C28.7408867,35.1510638 29.6989163,36.1036995 30.8698413,36.1036995 Z"></path>
<path d="M11.8156979,36.1036995 L17.1380843,36.1036995 C18.3090093,36.1036995 19.2670389,35.1510638 19.2670389,33.9867312 L19.2670389,0.00938897022 L9.6867433,0.00938897022 L9.6867433,33.9867312 C9.6867433,35.1510638 10.6447729,36.1036995 11.8156979,36.1036995 Z"></path>
<path d="M2.2354023,36.1036995 L7.55778872,36.1036995 C8.72871374,36.1036995 9.6867433,35.1510638 9.6867433,33.9867312 L9.6867433,0.00938897022 L0.106447729,0.00938897022 L0.106447729,33.9867312 C0.106447729,35.1510638 1.06447729,36.1036995 2.2354023,36.1036995 Z"></path>
<path d="M21.3959934,36.1036995 L26.7183799,36.1036995 C27.8893049,36.1036995 28.8473344,35.1510638 28.8473344,33.9867312 L28.8473344,0.00938897022 L19.2670389,0.00938897022 L19.2670389,33.9867312 C19.2670389,35.1510638 20.2250684,36.1036995 21.3959934,36.1036995 Z"></path>
<path d="M78.6648714,36.1036995 L83.9872578,36.1036995 C85.1581828,36.1036995 86.1162124,35.1510638 86.1162124,33.9867312 L86.1162124,0.00938897022 L76.5359168,0.00938897022 L76.5359168,33.9867312 C76.5359168,35.1510638 77.4939464,36.1036995 78.6648714,36.1036995 Z"></path>
<path d="M69.0845758,36.1036995 L74.4069622,36.1036995 C75.5778872,36.1036995 76.5359168,35.1510638 76.5359168,33.9867312 L76.5359168,0.00938897022 L66.9556212,0.00938897022 L66.9556212,33.9867312 C66.9556212,35.1510638 67.9136508,36.1036995 69.0845758,36.1036995 Z"></path>
<path d="M88.2451669,36.1036995 L93.5675534,36.1036995 C94.7384784,36.1036995 95.6965079,35.1510638 95.6965079,33.9867312 L95.6965079,0.00938897022 L86.1162124,0.00938897022 L86.1162124,33.9867312 C86.1162124,35.1510638 87.0742419,36.1036995 88.2451669,36.1036995 Z"></path>
</g>
<path d="M59.5042802,39.0580663 L64.8266667,39.0580663 C65.9975917,39.0580663 66.9556212,38.1054305 66.9556212,36.9410979 L66.9556212,2.9637557 L57.3753257,2.9637557 L57.3753257,36.9410979 C57.3753257,38.1054305 58.3333552,39.0580663 59.5042802,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M50.0304324,39.0580663 L55.3528188,39.0580663 C56.5237438,39.0580663 57.4817734,38.1054305 57.4817734,36.9410979 L57.4817734,2.9637557 L47.9014778,2.9637557 L47.9014778,36.9410979 C47.9014778,38.1054305 48.8595074,39.0580663 50.0304324,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M40.4501368,39.0580663 L45.7725233,39.0580663 C46.9434483,39.0580663 47.9014778,38.1054305 47.9014778,36.9410979 L47.9014778,2.9637557 L38.3211823,2.9637557 L38.3211823,36.9410979 C38.3211823,38.1054305 39.2792118,39.0580663 40.4501368,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M30.8698413,39.0580663 L36.1922277,39.0580663 C37.3631527,39.0580663 38.3211823,38.1054305 38.3211823,36.9410979 L38.3211823,2.9637557 L28.7408867,2.9637557 L28.7408867,36.9410979 C28.7408867,38.1054305 29.6989163,39.0580663 30.8698413,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M59.5042802,36.0943105 L64.8266667,36.0943105 C65.9975917,36.0943105 66.9556212,35.1416748 66.9556212,33.9773422 L66.9556212,0 L57.3753257,0 L57.3753257,33.9773422 C57.3753257,35.1416748 58.3333552,36.0943105 59.5042802,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M50.0304324,36.0943105 L55.3528188,36.0943105 C56.5237438,36.0943105 57.4817734,35.1416748 57.4817734,33.9773422 L57.4817734,0 L47.9014778,0 L47.9014778,33.9773422 C47.9014778,35.1416748 48.8595074,36.0943105 50.0304324,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M11.8156979,39.0580663 L17.1380843,39.0580663 C18.3090093,39.0580663 19.2670389,38.1054305 19.2670389,36.9410979 L19.2670389,2.9637557 L9.6867433,2.9637557 L9.6867433,36.9410979 C9.6867433,38.1054305 10.6447729,39.0580663 11.8156979,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M2.2354023,39.0580663 L7.55778872,39.0580663 C8.72871374,39.0580663 9.6867433,38.1054305 9.6867433,36.9410979 L9.6867433,2.9637557 L0.106447729,2.9637557 L0.106447729,36.9410979 C0.106447729,38.1054305 1.06447729,39.0580663 2.2354023,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M11.8156979,36.0943105 L17.1380843,36.0943105 C18.3090093,36.0943105 19.2670389,35.1416748 19.2670389,33.9773422 L19.2670389,0 L9.6867433,0 L9.6867433,33.9773422 C9.6867433,35.1416748 10.6447729,36.0943105 11.8156979,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M2.2354023,38.9522178 L7.55778872,38.9522178 C8.72871374,38.9522178 9.6867433,37.9995821 9.6867433,36.8352495 L9.6867433,0 L0.106447729,0 L0.106447729,36.8352495 C0.106447729,37.9995821 1.06447729,38.9522178 2.2354023,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M40.4501368,38.9522178 L45.7725233,38.9522178 C46.9434483,38.9522178 47.9014778,37.9995821 47.9014778,36.8352495 L47.9014778,0 L38.3211823,0 L38.3211823,36.8352495 C38.3211823,37.9995821 39.2792118,38.9522178 40.4501368,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M30.8698413,36.0943105 L36.1922277,36.0943105 C37.3631527,36.0943105 38.3211823,35.1416748 38.3211823,33.9773422 L38.3211823,0 L28.7408867,0 L28.7408867,33.9773422 C28.7408867,35.1416748 29.6989163,36.0943105 30.8698413,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M21.3959934,39.0580663 L26.7183799,39.0580663 C27.8893049,39.0580663 28.8473344,38.1054305 28.8473344,36.9410979 L28.8473344,2.9637557 L19.2670389,2.9637557 L19.2670389,36.9410979 C19.2670389,38.1054305 20.2250684,39.0580663 21.3959934,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M21.3959934,38.9522178 L26.7183799,38.9522178 C27.8893049,38.9522178 28.8473344,37.9995821 28.8473344,36.8352495 L28.8473344,0 L19.2670389,0 L19.2670389,36.8352495 C19.2670389,37.9995821 20.2250684,38.9522178 21.3959934,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M78.6648714,39.0580663 L83.9872578,39.0580663 C85.1581828,39.0580663 86.1162124,38.1054305 86.1162124,36.9410979 L86.1162124,2.9637557 L76.5359168,2.9637557 L76.5359168,36.9410979 C76.5359168,38.1054305 77.4939464,39.0580663 78.6648714,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M69.0845758,39.0580663 L74.4069622,39.0580663 C75.5778872,39.0580663 76.5359168,38.1054305 76.5359168,36.9410979 L76.5359168,2.9637557 L66.9556212,2.9637557 L66.9556212,36.9410979 C66.9556212,38.1054305 67.9136508,39.0580663 69.0845758,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M78.6648714,36.0943105 L83.9872578,36.0943105 C85.1581828,36.0943105 86.1162124,35.1416748 86.1162124,33.9773422 L86.1162124,0 L76.5359168,0 L76.5359168,33.9773422 C76.5359168,35.1416748 77.4939464,36.0943105 78.6648714,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M69.0845758,36.0943105 L74.4069622,36.0943105 C75.5778872,36.0943105 76.5359168,35.1416748 76.5359168,33.9773422 L76.5359168,0 L66.9556212,0 L66.9556212,33.9773422 C66.9556212,35.1416748 67.9136508,36.0943105 69.0845758,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M88.2451669,39.0580663 L93.5675534,39.0580663 C94.7384784,39.0580663 95.6965079,38.1054305 95.6965079,36.9410979 L95.6965079,2.9637557 L86.1162124,2.9637557 L86.1162124,36.9410979 C86.1162124,38.1054305 87.0742419,39.0580663 88.2451669,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M88.2451669,36.0943105 L93.5675534,36.0943105 C94.7384784,36.0943105 95.6965079,35.1416748 95.6965079,33.9773422 L95.6965079,0 L86.1162124,0 L86.1162124,33.9773422 C86.1162124,35.1416748 87.0742419,36.0943105 88.2451669,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
</g>
<g id="Group" transform="translate(0.370127, 0.108446)" stroke-width="0.687022901">
<rect id="Rectangle" stroke="#4D4D4D" fill="#4D4D4D" x="6.08117957" y="0" width="144.027937" height="18.8892275"></rect>
<rect id="Rectangle" stroke="#000000" fill="#000000" opacity="0.1" x="6.08117957" y="16.1455408" width="144.027937" height="8.33658644"></rect>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<path d="M6.08117957,54.8737335 L6.08117957,0 L5.33436804,0 C2.66718402,0 0.533436804,2.11052821 0.533436804,4.74868848 L0.533436804,50.1250451 C0.533436804,52.7632053 2.66718402,54.8737335 5.33436804,54.8737335 L6.08117957,54.8737335 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
</g>
<g id="Group" transform="translate(12.191798, 18.052815)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.11034483,22.151804 L4.01970443,22.151804 C5.12512315,22.151804 6.02955665,21.2069403 6.02955665,20.0521069 L6.02955665,0.944863676 L0.100492611,0.944863676 L0.100492611,20.0521069 C0.100492611,21.2069403 1.00492611,22.151804 2.11034483,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.11034483,21.3119251 L4.01970443,21.3119251 C5.12512315,21.3119251 6.02955665,20.3670615 6.02955665,19.2122281 L6.02955665,0 L0.100492611,0 L0.100492611,19.1072432 C0.100492611,20.3670615 1.00492611,21.3119251 2.11034483,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(22.429762, 18.199740)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.46206897,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0.117241379,0.944863676 L0.117241379,20.0521069 C0.117241379,21.2069403 1.17241379,22.151804 2.46206897,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.46206897,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0.117241379,0 L0.117241379,19.1072432 C0.117241379,20.3670615 1.17241379,21.3119251 2.46206897,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(40.767135, 18.027776)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(51.020366, 18.349079)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.00985222,22.151804 L3.91921182,22.151804 C5.02463054,22.151804 5.92906404,21.2069403 5.92906404,20.0521069 L5.92906404,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 0.904433498,22.151804 2.00985222,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.00985222,21.3119251 L3.91921182,21.3119251 C5.02463054,21.3119251 5.92906404,20.3670615 5.92906404,19.2122281 L5.92906404,0 L0,0 L0,19.1072432 C0,20.3670615 0.904433498,21.3119251 2.00985222,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(61.083826, 17.507057)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.57241379,22.151804 C5.86206897,22.151804 6.91724138,21.2069403 6.91724138,20.0521069 L6.91724138,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.57241379,21.3119251 C5.86206897,21.3119251 6.91724138,20.3670615 6.91724138,19.2122281 L6.91724138,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(79.603336, 18.411229)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.32568614,22.151804 L4.5078114,22.151804 C5.77114708,22.151804 6.80478536,21.2069403 6.80478536,20.0521069 L6.80478536,0.944863676 L0.0287121745,0.944863676 L0.0287121745,20.0521069 C0.0287121745,21.2069403 1.06235046,22.151804 2.32568614,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.32568614,21.3119251 L4.5078114,21.3119251 C5.77114708,21.3119251 6.80478536,20.3670615 6.80478536,19.2122281 L6.80478536,0 L0.0287121745,0 L0.0287121745,19.1072432 C0.0287121745,20.3670615 1.06235046,21.3119251 2.32568614,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(89.680931, 18.645342)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.37884047,22.151804 L4.56096573,22.151804 C5.82430141,22.151804 6.8579397,21.2069403 6.8579397,20.0521069 L6.8579397,0.944863676 L0.0818665079,0.944863676 L0.0818665079,20.0521069 C0.0818665079,21.2069403 1.11550479,22.151804 2.37884047,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.37884047,21.3119251 L4.56096573,21.3119251 C5.82430141,21.3119251 6.8579397,20.3670615 6.8579397,19.2122281 L6.8579397,1.13686838e-13 L0.0818665079,1.13686838e-13 L0.0818665079,19.1072432 C0.0818665079,20.3670615 1.11550479,21.3119251 2.37884047,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<path d="M33.6502555,12.7717235 L7.59661566,12.7717235 C6.97132831,12.7717235 6.55447007,12.3561912 6.55447007,11.7328929 L6.55447007,4.77272765 C6.55447007,4.14942927 6.97132831,3.73389702 7.59661566,3.73389702 L33.6502555,3.73389702 C34.2755429,3.73389702 34.6924011,4.14942927 34.6924011,4.77272765 L34.6924011,11.7328929 C34.6924011,12.2523082 34.2755429,12.7717235 33.6502555,12.7717235 Z" id="Path" stroke="#3D79CC" stroke-width="0.687022901" fill="#4C97FF"></path>
<g id="Group" transform="translate(39.969018, 3.432625)" stroke-width="0.687022901">
<path d="M4.29605911,8.86989672 C2.14802956,8.86989672 0.339162562,7.08464704 0.339162562,4.96466306 L0.339162562,3.96046012 C0.339162562,1.84047613 2.14802956,0.0552264618 4.29605911,0.0552264618 C6.44408867,0.0552264618 8.25295567,1.84047613 8.25295567,3.96046012 L8.25295567,4.96466306 C8.13990148,7.19622515 6.44408867,8.86989672 4.29605911,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.29605911" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.29605911,3.90523366 L8.13990148,3.90523366" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(52.019430, 2.329035)" stroke-width="0.687022901">
<path d="M4.63522167,8.86989672 C2.48719212,8.86989672 0.678325123,7.08464704 0.678325123,4.96466306 L0.678325123,3.96046012 C0.678325123,1.84047613 2.48719212,0.0552264618 4.63522167,0.0552264618 C6.78325123,0.0552264618 8.59211823,1.84047613 8.59211823,3.96046012 L8.59211823,4.96466306 C8.59211823,7.19622515 6.78325123,8.86989672 4.63522167,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.63522167" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.63522167,3.90523366 L1.92192118,6.69468627" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(64.259612, 2.388771)" stroke-width="0.687022901">
<path d="M3.96945813,8.86989672 C1.82142857,8.86989672 0.0125615764,7.08464704 0.0125615764,4.96466306 L0.0125615764,3.96046012 C0.0125615764,1.84047613 1.82142857,0.0552264618 3.96945813,0.0552264618 C6.11748768,0.0552264618 7.92635468,1.84047613 7.92635468,3.96046012 L7.92635468,4.96466306 C7.92635468,7.19622515 6.23054187,8.86989672 3.96945813,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="3.96945813" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M3.96945813,3.90523366 L1.25615764,1.22735915" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
</g>
<g id="Brush" transform="translate(133.665334, 57.505104) rotate(32.000000) translate(-133.665334, -57.505104) translate(105.165334, 7.505104)">
<g transform="translate(0.198739, 59.266148)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Rectangle" fill="#D9E3F2" xlink:href="#path-1"></use>
<path d="M9.1931763,20.1536099 C8.1753615,28.0189044 -3.82263747,37.5601931 -2.75644256,38.8990826 C-1.69024765,40.2379721 24.2859438,42.9357798 33.2597204,42.9357798 C42.233497,42.9357798 64.0143184,46.7070403 61.1501184,36.9578538 C58.2859184,27.2086673 58.7728959,25.7164202 58.7728959,22.2206833 C58.7728959,18.7249464 58.7728959,15.4320715 52.6895165,20.1536099 C46.6061371,24.8751483 38.7545168,25.5859224 33.2597204,22.2206833 C27.7649241,18.8554442 10.2109911,12.2883154 9.1931763,20.1536099 Z" id="Path-13" fill="#FF6680" mask="url(#mask-2)"></path>
<path d="M9.12301562,20.1615553 C8.10520081,28.0268498 -3.89279815,37.5681385 -2.82660324,38.907028 C-1.76040834,40.2459175 24.2157832,42.9437253 33.1895598,42.9437253 C42.1633364,42.9437253 63.9441577,46.7149858 61.0799577,36.9657993 C58.2157577,27.2166128 58.7027353,25.7243656 58.7027353,22.2286287 C58.7027353,18.7328918 58.7027353,15.440017 52.6193558,20.1615553 C46.5359764,24.8830937 38.6843561,25.5938678 33.1895598,22.2286287 C27.6947634,18.8633897 10.1408304,12.2962609 9.12301562,20.1615553 Z" id="Path-13" fill="#FF6680" mask="url(#mask-2)"></path>
</g>
<g id="Handle" transform="translate(14.450704, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Combined-Shape-Copy" fill="#FFAB19" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy" fill="#CF8B17" x="14.686599" y="55.2158408" width="40.943662" height="7.2"></rect>
</g>
<g id="Hat-Block" transform="translate(602.901108, 40.272764) rotate(-4.000000) translate(-602.901108, -40.272764) translate(562.401108, 18.772764)">
<path d="M80.3940887,35.4800823 C80.3940887,36.753597 79.3891626,37.7871742 78.1609195,37.7871742 L32.1442365,37.7871742 C31.5502135,37.7871742 30.9829885,38.0271117 30.5631527,38.460845 L27.4501149,41.6815453 C27.0302791,42.1106644 26.4630542,42.3552161 25.8690312,42.3552161 L14.3235468,42.3552161 C13.7295238,42.3552161 13.1622989,42.1106644 12.7424631,41.6815453 L9.62942529,38.460845 C9.20958949,38.0271117 8.64236453,37.7871742 8.05280788,37.7871742 L2.23316913,37.7871742 C1.00045977,37.7871742 0,36.753597 0,35.4800823 L0,14.6701135 C5.46582178,7.19712971 13.6130679,3.46063782 24.4417384,3.46063782 C35.2704089,3.46063782 43.417655,7.19712971 48.8834768,14.6701135 L78.1609195,14.6701135 C79.3891626,14.6701135 80.3940887,15.7036907 80.3940887,16.9772054 L80.3940887,35.4800823 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M80.3940887,32.0194445 C80.3940887,33.2929592 79.3891626,34.3265363 78.1609195,34.3265363 L32.1442365,34.3265363 C31.5502135,34.3265363 30.9829885,34.5664739 30.5631527,35.0002072 L27.4501149,38.2209074 C27.0302791,38.6500265 26.4630542,38.8945783 25.8690312,38.8945783 L14.3235468,38.8945783 C13.7295238,38.8945783 13.1622989,38.6500265 12.7424631,38.2209074 L9.62942529,35.0002072 C9.20958949,34.5664739 8.64236453,34.3265363 8.05280788,34.3265363 L2.23316913,34.3265363 C1.00045977,34.3265363 0,33.2929592 0,32.0194445 L0,11.2094757 C5.46582178,3.73649189 13.6130679,6.41580182e-16 24.4417384,0 C35.2704089,0 43.417655,3.73649189 48.8834768,11.2094757 L78.1609195,11.2094757 C79.3891626,11.2094757 80.3940887,12.2430528 80.3940887,13.5165676 L80.3940887,32.0194445 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

185
static/svgs/intro/background.svg Normal file
View file

@ -0,0 +1,185 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="689px" height="325px" viewBox="0 0 689 325" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Video Illustration</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M14.5241774,3.20760789 L55.4279804,0.408844227 C55.7934597,24.6663719 52.0706428,37.4964514 44.2595295,38.8990826 C32.5428596,41.0030294 38.750069,35.2465596 29.4537632,38.8990826 C20.1574574,42.5516055 22.4253297,34.9448108 17.2161787,36.9416571 C12.0070276,38.9385034 -5.50698389,40.3280372 2.40338083,32.6024943 C10.6906189,24.5088835 14.7308844,14.710588 14.5241774,3.20760789 Z" id="path-1"></path>
<path d="M20.9123655,58.6008461 L0.431741793,58.6008461 C0.431741793,58.0180672 0.431741793,56.3303192 0.431741793,53.537602 C0.431741793,45.9143265 15.6791033,47.605026 15.6791033,37.2133454 C15.6791033,26.8216647 11.3430974,25.1507095 11.3430974,15.5485612 C11.3430974,10.1221762 12.9645554,0.208160149 20.9035733,0.200846078 C28.8425902,0.208160149 30.4640481,10.1221762 30.4640481,15.5485612 C30.4640481,25.1507095 26.1280422,26.8216647 26.1280422,37.2133454 C26.1280422,47.605026 41.3754038,45.9143265 41.3754038,53.537602 C41.3754038,56.3303192 41.3754038,58.0180672 41.3754038,58.6008461 L20.9123655,58.6008461 Z M21.2088857,14.1126327 C22.9606064,14.1126327 24.3806566,12.32816 24.3806566,10.1269013 C24.3806566,7.92564269 22.9606064,6.14116998 21.2088857,6.14116998 C19.457165,6.14116998 18.0371148,7.92564269 18.0371148,10.1269013 C18.0371148,12.32816 19.457165,14.1126327 21.2088857,14.1126327 Z" id="path-3"></path>
</defs>
<g id="Video-Illustration" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -11.000000)" id="background">
<g>
<path d="M472.338333,104.593072 C488.221485,134.757488 441.56795,149.119847 506.083023,150.747079 C570.598096,152.374311 586.479005,169.861791 576.058279,195.998966 C565.637554,222.136141 438.09288,190.61679 444.5445,223.477341 C450.996119,256.337892 549.755524,228.405167 541.31879,281.381754 C532.882057,334.358342 419.729458,275.003211 341.264381,314.764768 C262.799305,354.526325 115,334.476673 115,287.474026 C115,240.47138 192.435065,260.35028 192.435065,236.286617 C192.435065,212.222955 115,234.059895 115,191.218902 C115,148.377909 245.040577,189.232437 245.040577,157.875632 C245.040577,126.518828 147.770008,154.333498 147.770008,115.857707 C147.770008,77.3819163 227.670833,101.019115 232.137338,82.4510747 C236.603844,63.8830341 205.834583,72.8985963 212.78248,46.3674663 C224.480741,1.69667929 482.757938,-6.38135329 422.70825,55.6975767 C387.454346,92.1428049 456.455182,74.4286554 472.338333,104.593072 Z M74.1292601,251.250509 C107.272104,259.63376 74.1292601,320.63497 46.5102238,299.621867 C18.8911875,278.608763 40.9864166,242.867258 74.1292601,251.250509 Z M89.6037252,206.726385 C111.816812,212.466923 109.852371,246.729593 84.6274561,238.821226 C59.4025409,230.912859 67.3906385,200.985846 89.6037252,206.726385 Z M580.603725,260.726385 C602.816812,266.466923 600.852371,300.729593 575.627456,292.821226 C550.402541,284.912859 558.390639,254.985846 580.603725,260.726385 Z M467.154629,32.325099 C501.495856,-1.39185926 623.432095,15.3005855 618.875621,50.9645059 C614.319147,86.6284264 568.187513,53.4138894 565.699018,75.4606194 C563.210524,97.5073495 595.063255,78.1763147 595.063255,102.086796 C595.063255,125.997278 504.482049,135.252415 504.482049,104.370381 C504.482049,87.2942566 521.901512,88.8587119 527.3762,85.118075 C532.850889,81.377438 539.767464,65.9219018 513.363447,66.2760944 C473.624716,66.8091635 446.373848,52.7281196 467.154629,32.325099 Z" id="Combined-Shape" fill-opacity="0.15" fill="#000000"></path>
<g id="Command-Block-Copy" transform="translate(33.886639, 269.719246) rotate(10.000000) translate(-33.886639, -269.719246) translate(2.386639, 253.219246)">
<path d="M62.3054187,6.06828287 L62.3054187,25.5353343 C62.3054187,26.8752112 61.231518,27.9626475 59.9083189,27.9626475 L34.5038549,27.9626475 C33.8662264,27.9626475 33.257363,28.2150881 32.8115024,28.6714229 L29.4651511,32.0599521 C29.0192905,32.5114323 28.4104272,32.7687275 27.7727986,32.7687275 L15.3749983,32.7687275 C14.7421639,32.7687275 14.1333006,32.5114323 13.6778516,32.0599521 L10.3410887,28.6714229 C9.89043389,28.2150881 9.27677633,27.9626475 8.64394198,27.9626475 L2.39709983,27.9626475 C1.07390072,27.9626475 0,26.8752112 0,25.5353343 L0,6.06828287 C0,4.72840602 1.07390072,3.64096972 2.39709983,3.64096972 L8.59599998,3.64096972 C9.23362854,3.64096972 9.84249189,3.89826492 10.2883525,4.34974516 L13.6778516,7.78682058 C14.1333006,8.23830083 14.7421639,8.49559602 15.3749983,8.49559602 L27.7727986,8.49559602 C28.4104272,8.49559602 29.0192905,8.23830083 29.4651511,7.78682058 L32.8546502,4.34974516 C33.3100992,3.89826492 33.9189626,3.64096972 34.5517969,3.64096972 L59.9083189,3.64096972 C61.231518,3.64096972 62.3054187,4.72840602 62.3054187,6.06828287" id="Fill-6-Copy" fill="#855CD6"></path>
<path d="M62.3054187,21.8943646 C62.3054187,23.2342415 61.231518,24.3216778 59.9083189,24.3216778 L34.5038549,24.3216778 C33.8662264,24.3216778 33.257363,24.5741183 32.8115024,25.0304532 L29.4651511,28.4189824 C29.0192905,28.8704626 28.4104272,29.1277578 27.7727986,29.1277578 L15.3749983,29.1277578 C14.7421639,29.1277578 14.1333006,28.8704626 13.6778516,28.4189824 L10.3410887,25.0304532 C9.89043389,24.5741183 9.27677633,24.3216778 8.64394198,24.3216778 L2.39709983,24.3216778 C1.07390072,24.3216778 0,23.2342415 0,21.8943646 L0,2.42731315 C0,1.08743629 1.07390072,0 2.39709983,0 L8.59599998,0 C9.23362854,0 9.84249189,0.257295194 10.2883525,0.70877544 L13.6778516,4.14585086 C14.1333006,4.59733111 14.7421639,4.8546263 15.3749983,4.8546263 L27.7727986,4.8546263 C28.4104272,4.8546263 29.0192905,4.59733111 29.4651511,4.14585086 L32.8546502,0.70877544 C33.3100992,0.257295194 33.9189626,0 34.5517969,0 L59.9083189,0 C61.231518,0 62.3054187,1.08743629 62.3054187,2.42731315 L62.3054187,21.8943646 Z" id="Fill-6" fill="#9966FF"></path>
</g>
<g id="Piano" transform="translate(609.946690, 219.221859) rotate(5.000000) translate(-609.946690, -219.221859) translate(531.446690, 187.721859)" stroke-linecap="round" stroke-linejoin="round">
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#000000" stroke-width="0.687022901" fill="#000000" opacity="0.1" x="5.7267269" y="51.8209115" width="143.704433" height="9.03782646"></rect>
<rect id="Rectangle" stroke="#4D4D4D" stroke-width="0.687022901" fill="#4D4D4D" x="5.55222331" y="50.8319646" width="143.704433" height="9.03782646"></rect>
<g id="Group" transform="translate(5.554639, 18.433690)">
<g opacity="0.15" transform="translate(0.000000, 2.954367)" fill="#000000" id="Path" stroke="#000000" stroke-width="3.4351145">
<path d="M59.5042802,36.1036995 L64.8266667,36.1036995 C65.9975917,36.1036995 66.9556212,35.1510638 66.9556212,33.9867312 L66.9556212,0.00938897022 L57.3753257,0.00938897022 L57.3753257,33.9867312 C57.3753257,35.1510638 58.3333552,36.1036995 59.5042802,36.1036995 Z"></path>
<path d="M50.0304324,36.1036995 L55.3528188,36.1036995 C56.5237438,36.1036995 57.4817734,35.1510638 57.4817734,33.9867312 L57.4817734,0.00938897022 L47.9014778,0.00938897022 L47.9014778,33.9867312 C47.9014778,35.1510638 48.8595074,36.1036995 50.0304324,36.1036995 Z"></path>
<path d="M40.4501368,36.1036995 L45.7725233,36.1036995 C46.9434483,36.1036995 47.9014778,35.1510638 47.9014778,33.9867312 L47.9014778,0.00938897022 L38.3211823,0.00938897022 L38.3211823,33.9867312 C38.3211823,35.1510638 39.2792118,36.1036995 40.4501368,36.1036995 Z"></path>
<path d="M30.8698413,36.1036995 L36.1922277,36.1036995 C37.3631527,36.1036995 38.3211823,35.1510638 38.3211823,33.9867312 L38.3211823,0.00938897022 L28.7408867,0.00938897022 L28.7408867,33.9867312 C28.7408867,35.1510638 29.6989163,36.1036995 30.8698413,36.1036995 Z"></path>
<path d="M11.8156979,36.1036995 L17.1380843,36.1036995 C18.3090093,36.1036995 19.2670389,35.1510638 19.2670389,33.9867312 L19.2670389,0.00938897022 L9.6867433,0.00938897022 L9.6867433,33.9867312 C9.6867433,35.1510638 10.6447729,36.1036995 11.8156979,36.1036995 Z"></path>
<path d="M2.2354023,36.1036995 L7.55778872,36.1036995 C8.72871374,36.1036995 9.6867433,35.1510638 9.6867433,33.9867312 L9.6867433,0.00938897022 L0.106447729,0.00938897022 L0.106447729,33.9867312 C0.106447729,35.1510638 1.06447729,36.1036995 2.2354023,36.1036995 Z"></path>
<path d="M21.3959934,36.1036995 L26.7183799,36.1036995 C27.8893049,36.1036995 28.8473344,35.1510638 28.8473344,33.9867312 L28.8473344,0.00938897022 L19.2670389,0.00938897022 L19.2670389,33.9867312 C19.2670389,35.1510638 20.2250684,36.1036995 21.3959934,36.1036995 Z"></path>
<path d="M126.459901,36.1036995 L131.782288,36.1036995 C132.953213,36.1036995 133.911242,35.1510638 133.911242,33.9867312 L133.911242,0.00938897022 L124.330947,0.00938897022 L124.330947,33.9867312 C124.330947,35.1510638 125.288976,36.1036995 126.459901,36.1036995 Z"></path>
<path d="M136.040197,36.1036995 L141.362583,36.1036995 C142.533508,36.1036995 143.491538,35.1510638 143.491538,33.9867312 L143.491538,0.00938897022 L133.911242,0.00938897022 L133.911242,33.9867312 C133.911242,35.1510638 134.869272,36.1036995 136.040197,36.1036995 Z"></path>
<path d="M116.879606,36.1036995 L122.201992,36.1036995 C123.372917,36.1036995 124.330947,35.1510638 124.330947,33.9867312 L124.330947,0.00938897022 L114.750651,0.00938897022 L114.750651,33.9867312 C114.750651,35.1510638 115.708681,36.1036995 116.879606,36.1036995 Z"></path>
<path d="M107.29931,36.1036995 L112.621697,36.1036995 C113.792622,36.1036995 114.750651,35.1510638 114.750651,33.9867312 L114.750651,0.00938897022 L105.170356,0.00938897022 L105.170356,33.9867312 C105.170356,35.1510638 106.128385,36.1036995 107.29931,36.1036995 Z"></path>
<path d="M97.7190148,36.1036995 L103.041401,36.1036995 C104.212326,36.1036995 105.170356,35.1510638 105.170356,33.9867312 L105.170356,0.00938897022 L95.5900602,0.00938897022 L95.5900602,33.9867312 C95.5900602,35.1510638 96.5480898,36.1036995 97.7190148,36.1036995 Z"></path>
<path d="M78.6648714,36.1036995 L83.9872578,36.1036995 C85.1581828,36.1036995 86.1162124,35.1510638 86.1162124,33.9867312 L86.1162124,0.00938897022 L76.5359168,0.00938897022 L76.5359168,33.9867312 C76.5359168,35.1510638 77.4939464,36.1036995 78.6648714,36.1036995 Z"></path>
<path d="M69.0845758,36.1036995 L74.4069622,36.1036995 C75.5778872,36.1036995 76.5359168,35.1510638 76.5359168,33.9867312 L76.5359168,0.00938897022 L66.9556212,0.00938897022 L66.9556212,33.9867312 C66.9556212,35.1510638 67.9136508,36.1036995 69.0845758,36.1036995 Z"></path>
<path d="M88.2451669,36.1036995 L93.5675534,36.1036995 C94.7384784,36.1036995 95.6965079,35.1510638 95.6965079,33.9867312 L95.6965079,0.00938897022 L86.1162124,0.00938897022 L86.1162124,33.9867312 C86.1162124,35.1510638 87.0742419,36.1036995 88.2451669,36.1036995 Z"></path>
</g>
<path d="M59.5042802,39.0580663 L64.8266667,39.0580663 C65.9975917,39.0580663 66.9556212,38.1054305 66.9556212,36.9410979 L66.9556212,2.9637557 L57.3753257,2.9637557 L57.3753257,36.9410979 C57.3753257,38.1054305 58.3333552,39.0580663 59.5042802,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M50.0304324,39.0580663 L55.3528188,39.0580663 C56.5237438,39.0580663 57.4817734,38.1054305 57.4817734,36.9410979 L57.4817734,2.9637557 L47.9014778,2.9637557 L47.9014778,36.9410979 C47.9014778,38.1054305 48.8595074,39.0580663 50.0304324,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M40.4501368,39.0580663 L45.7725233,39.0580663 C46.9434483,39.0580663 47.9014778,38.1054305 47.9014778,36.9410979 L47.9014778,2.9637557 L38.3211823,2.9637557 L38.3211823,36.9410979 C38.3211823,38.1054305 39.2792118,39.0580663 40.4501368,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M30.8698413,39.0580663 L36.1922277,39.0580663 C37.3631527,39.0580663 38.3211823,38.1054305 38.3211823,36.9410979 L38.3211823,2.9637557 L28.7408867,2.9637557 L28.7408867,36.9410979 C28.7408867,38.1054305 29.6989163,39.0580663 30.8698413,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M59.5042802,36.0943105 L64.8266667,36.0943105 C65.9975917,36.0943105 66.9556212,35.1416748 66.9556212,33.9773422 L66.9556212,0 L57.3753257,0 L57.3753257,33.9773422 C57.3753257,35.1416748 58.3333552,36.0943105 59.5042802,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M50.0304324,36.0943105 L55.3528188,36.0943105 C56.5237438,36.0943105 57.4817734,35.1416748 57.4817734,33.9773422 L57.4817734,0 L47.9014778,0 L47.9014778,33.9773422 C47.9014778,35.1416748 48.8595074,36.0943105 50.0304324,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M11.8156979,39.0580663 L17.1380843,39.0580663 C18.3090093,39.0580663 19.2670389,38.1054305 19.2670389,36.9410979 L19.2670389,2.9637557 L9.6867433,2.9637557 L9.6867433,36.9410979 C9.6867433,38.1054305 10.6447729,39.0580663 11.8156979,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M2.2354023,39.0580663 L7.55778872,39.0580663 C8.72871374,39.0580663 9.6867433,38.1054305 9.6867433,36.9410979 L9.6867433,2.9637557 L0.106447729,2.9637557 L0.106447729,36.9410979 C0.106447729,38.1054305 1.06447729,39.0580663 2.2354023,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M11.8156979,36.0943105 L17.1380843,36.0943105 C18.3090093,36.0943105 19.2670389,35.1416748 19.2670389,33.9773422 L19.2670389,0 L9.6867433,0 L9.6867433,33.9773422 C9.6867433,35.1416748 10.6447729,36.0943105 11.8156979,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M2.2354023,38.9522178 L7.55778872,38.9522178 C8.72871374,38.9522178 9.6867433,37.9995821 9.6867433,36.8352495 L9.6867433,0 L0.106447729,0 L0.106447729,36.8352495 C0.106447729,37.9995821 1.06447729,38.9522178 2.2354023,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M135.933749,39.0580663 L141.256136,39.0580663 C142.427061,39.0580663 143.38509,38.1054305 143.38509,36.9410979 L143.38509,2.9637557 L133.804795,2.9637557 L133.804795,36.9410979 C133.804795,38.1054305 134.762824,39.0580663 135.933749,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M135.933749,36.0943105 L141.256136,36.0943105 C142.427061,36.0943105 143.38509,35.1416748 143.38509,33.9773422 L143.38509,0 L133.804795,0 L133.804795,33.9773422 C133.804795,35.1416748 134.762824,36.0943105 135.933749,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M40.4501368,38.9522178 L45.7725233,38.9522178 C46.9434483,38.9522178 47.9014778,37.9995821 47.9014778,36.8352495 L47.9014778,0 L38.3211823,0 L38.3211823,36.8352495 C38.3211823,37.9995821 39.2792118,38.9522178 40.4501368,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M30.8698413,36.0943105 L36.1922277,36.0943105 C37.3631527,36.0943105 38.3211823,35.1416748 38.3211823,33.9773422 L38.3211823,0 L28.7408867,0 L28.7408867,33.9773422 C28.7408867,35.1416748 29.6989163,36.0943105 30.8698413,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M21.3959934,39.0580663 L26.7183799,39.0580663 C27.8893049,39.0580663 28.8473344,38.1054305 28.8473344,36.9410979 L28.8473344,2.9637557 L19.2670389,2.9637557 L19.2670389,36.9410979 C19.2670389,38.1054305 20.2250684,39.0580663 21.3959934,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M21.3959934,38.9522178 L26.7183799,38.9522178 C27.8893049,38.9522178 28.8473344,37.9995821 28.8473344,36.8352495 L28.8473344,0 L19.2670389,0 L19.2670389,36.8352495 C19.2670389,37.9995821 20.2250684,38.9522178 21.3959934,38.9522178 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#CCE6FF"></path>
<path d="M126.459901,39.0580663 L131.782288,39.0580663 C132.953213,39.0580663 133.911242,38.1054305 133.911242,36.9410979 L133.911242,2.9637557 L124.330947,2.9637557 L124.330947,36.9410979 C124.330947,38.1054305 125.288976,39.0580663 126.459901,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M116.879606,39.0580663 L122.201992,39.0580663 C123.372917,39.0580663 124.330947,38.1054305 124.330947,36.9410979 L124.330947,2.9637557 L114.750651,2.9637557 L114.750651,36.9410979 C114.750651,38.1054305 115.708681,39.0580663 116.879606,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M107.29931,39.0580663 L112.621697,39.0580663 C113.792622,39.0580663 114.750651,38.1054305 114.750651,36.9410979 L114.750651,2.9637557 L105.170356,2.9637557 L105.170356,36.9410979 C105.170356,38.1054305 106.128385,39.0580663 107.29931,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M97.7190148,39.0580663 L103.041401,39.0580663 C104.212326,39.0580663 105.170356,38.1054305 105.170356,36.9410979 L105.170356,2.9637557 L95.5900602,2.9637557 L95.5900602,36.9410979 C95.5900602,38.1054305 96.5480898,39.0580663 97.7190148,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M126.459901,36.0943105 L131.782288,36.0943105 C132.953213,36.0943105 133.911242,35.1416748 133.911242,33.9773422 L133.911242,0 L124.330947,0 L124.330947,33.9773422 C124.330947,35.1416748 125.288976,36.0943105 126.459901,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M116.879606,36.0943105 L122.201992,36.0943105 C123.372917,36.0943105 124.330947,35.1416748 124.330947,33.9773422 L124.330947,0 L114.750651,0 L114.750651,33.9773422 C114.750651,35.1416748 115.708681,36.0943105 116.879606,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M78.6648714,39.0580663 L83.9872578,39.0580663 C85.1581828,39.0580663 86.1162124,38.1054305 86.1162124,36.9410979 L86.1162124,2.9637557 L76.5359168,2.9637557 L76.5359168,36.9410979 C76.5359168,38.1054305 77.4939464,39.0580663 78.6648714,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M69.0845758,39.0580663 L74.4069622,39.0580663 C75.5778872,39.0580663 76.5359168,38.1054305 76.5359168,36.9410979 L76.5359168,2.9637557 L66.9556212,2.9637557 L66.9556212,36.9410979 C66.9556212,38.1054305 67.9136508,39.0580663 69.0845758,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M78.6648714,36.0943105 L83.9872578,36.0943105 C85.1581828,36.0943105 86.1162124,35.1416748 86.1162124,33.9773422 L86.1162124,0 L76.5359168,0 L76.5359168,33.9773422 C76.5359168,35.1416748 77.4939464,36.0943105 78.6648714,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M69.0845758,36.0943105 L74.4069622,36.0943105 C75.5778872,36.0943105 76.5359168,35.1416748 76.5359168,33.9773422 L76.5359168,0 L66.9556212,0 L66.9556212,33.9773422 C66.9556212,35.1416748 67.9136508,36.0943105 69.0845758,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M107.29931,36.0943105 L112.621697,36.0943105 C113.792622,36.0943105 114.750651,35.1416748 114.750651,33.9773422 L114.750651,0 L105.170356,0 L105.170356,33.9773422 C105.170356,35.1416748 106.128385,36.0943105 107.29931,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M97.7190148,36.0943105 L103.041401,36.0943105 C104.212326,36.0943105 105.170356,35.1416748 105.170356,33.9773422 L105.170356,0 L95.5900602,0 L95.5900602,33.9773422 C95.5900602,35.1416748 96.5480898,36.0943105 97.7190148,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
<path d="M88.2451669,39.0580663 L93.5675534,39.0580663 C94.7384784,39.0580663 95.6965079,38.1054305 95.6965079,36.9410979 L95.6965079,2.9637557 L86.1162124,2.9637557 L86.1162124,36.9410979 C86.1162124,38.1054305 87.0742419,39.0580663 88.2451669,39.0580663 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#BFBFBF"></path>
<path d="M88.2451669,36.0943105 L93.5675534,36.0943105 C94.7384784,36.0943105 95.6965079,35.1416748 95.6965079,33.9773422 L95.6965079,0 L86.1162124,0 L86.1162124,33.9773422 C86.1162124,35.1416748 87.0742419,36.0943105 88.2451669,36.0943105 Z" id="Path" stroke="#4D4D4D" stroke-width="0.687022901" fill="#FFFFFF"></path>
</g>
<g id="Group" transform="translate(0.370127, 0.108446)" stroke-width="0.687022901">
<rect id="Rectangle" stroke="#4D4D4D" fill="#4D4D4D" x="6.08117957" y="0" width="144.027937" height="18.8892275"></rect>
<path d="M150.215804,61.416371 L150.215804,10.8692203 L150.962616,10.8692203 C153.6298,10.8692203 155.763547,12.9797485 155.763547,15.6179088 L155.763547,56.5621561 C155.763547,59.2003164 153.6298,61.3108446 150.962616,61.3108446 L150.215804,61.3108446 L150.215804,61.416371 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
<path d="M150.215804,61.416371 L150.215804,10.8692203 L150.962616,10.8692203 C153.6298,10.8692203 155.763547,12.9797485 155.763547,15.6179088 L155.763547,56.5621561 C155.763547,59.2003164 153.6298,61.3108446 150.962616,61.3108446 L150.215804,61.3108446 L150.215804,61.416371 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<rect id="Rectangle" stroke="#000000" fill="#000000" opacity="0.1" x="6.08117957" y="16.1455408" width="144.027937" height="8.33658644"></rect>
<path d="M150.215804,54.8737335 L150.215804,0 L150.962616,0 C153.6298,0 155.763547,2.11052821 155.763547,4.74868848 L155.763547,50.1250451 C155.763547,52.7632053 153.6298,54.8737335 150.962616,54.8737335 L150.215804,54.8737335 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
<path d="M6.08117957,61.416371 L6.08117957,10.8692203 L5.33436804,10.8692203 C2.66718402,10.8692203 0.533436804,12.9797485 0.533436804,15.6179088 L0.533436804,56.5621561 C0.533436804,59.2003164 2.66718402,61.3108446 5.33436804,61.3108446 L6.08117957,61.3108446 L6.08117957,61.416371 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<path d="M6.08117957,54.8737335 L6.08117957,0 L5.33436804,0 C2.66718402,0 0.533436804,2.11052821 0.533436804,4.74868848 L0.533436804,50.1250451 C0.533436804,52.7632053 2.66718402,54.8737335 5.33436804,54.8737335 L6.08117957,54.8737335 Z" id="Path" stroke="#4D4D4D" fill="#4D4D4D"></path>
</g>
<g id="Group" transform="translate(12.191798, 18.052815)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.11034483,22.151804 L4.01970443,22.151804 C5.12512315,22.151804 6.02955665,21.2069403 6.02955665,20.0521069 L6.02955665,0.944863676 L0.100492611,0.944863676 L0.100492611,20.0521069 C0.100492611,21.2069403 1.00492611,22.151804 2.11034483,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.11034483,21.3119251 L4.01970443,21.3119251 C5.12512315,21.3119251 6.02955665,20.3670615 6.02955665,19.2122281 L6.02955665,0 L0.100492611,0 L0.100492611,19.1072432 C0.100492611,20.3670615 1.00492611,21.3119251 2.11034483,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(146.040483, 19.118398)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.00985222,22.151804 L2.21083744,22.151804 L2.21083744,0.944863676 L0.602955665,0.944863676 L0.602955665,20.7870009 C0.703448276,21.5218948 1.30640394,22.151804 2.00985222,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.71330049,21.3119251 L3.81871921,21.3119251 L3.81871921,0 L0.703448276,0 L0.703448276,19.1072432 C0.703448276,20.3670615 1.60788177,21.3119251 2.71330049,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(22.429762, 18.199740)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.46206897,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0.117241379,0.944863676 L0.117241379,20.0521069 C0.117241379,21.2069403 1.17241379,22.151804 2.46206897,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.46206897,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0.117241379,0 L0.117241379,19.1072432 C0.117241379,20.3670615 1.17241379,21.3119251 2.46206897,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(40.767135, 18.027776)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.68965517,22.151804 C5.97931034,22.151804 7.03448276,21.2069403 7.03448276,20.0521069 L7.03448276,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.68965517,21.3119251 C5.97931034,21.3119251 7.03448276,20.3670615 7.03448276,19.2122281 L7.03448276,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(51.020366, 18.349079)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.00985222,22.151804 L3.91921182,22.151804 C5.02463054,22.151804 5.92906404,21.2069403 5.92906404,20.0521069 L5.92906404,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 0.904433498,22.151804 2.00985222,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.00985222,21.3119251 L3.91921182,21.3119251 C5.02463054,21.3119251 5.92906404,20.3670615 5.92906404,19.2122281 L5.92906404,0 L0,0 L0,19.1072432 C0,20.3670615 0.904433498,21.3119251 2.00985222,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(61.083826, 17.507057)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.34482759,22.151804 L4.57241379,22.151804 C5.86206897,22.151804 6.91724138,21.2069403 6.91724138,20.0521069 L6.91724138,0.944863676 L0,0.944863676 L0,20.0521069 C0,21.2069403 1.05517241,22.151804 2.34482759,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.34482759,21.3119251 L4.57241379,21.3119251 C5.86206897,21.3119251 6.91724138,20.3670615 6.91724138,19.2122281 L6.91724138,0 L0,0 L0,19.1072432 C0,20.3670615 1.05517241,21.3119251 2.34482759,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(79.603336, 18.411229)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.32568614,22.151804 L4.5078114,22.151804 C5.77114708,22.151804 6.80478536,21.2069403 6.80478536,20.0521069 L6.80478536,0.944863676 L0.0287121745,0.944863676 L0.0287121745,20.0521069 C0.0287121745,21.2069403 1.06235046,22.151804 2.32568614,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.32568614,21.3119251 L4.5078114,21.3119251 C5.77114708,21.3119251 6.80478536,20.3670615 6.80478536,19.2122281 L6.80478536,0 L0.0287121745,0 L0.0287121745,19.1072432 C0.0287121745,20.3670615 1.06235046,21.3119251 2.32568614,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(89.680931, 18.645342)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.37884047,22.151804 L4.56096573,22.151804 C5.82430141,22.151804 6.8579397,21.2069403 6.8579397,20.0521069 L6.8579397,0.944863676 L0.0818665079,0.944863676 L0.0818665079,20.0521069 C0.0818665079,21.2069403 1.11550479,22.151804 2.37884047,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.37884047,21.3119251 L4.56096573,21.3119251 C5.82430141,21.3119251 6.8579397,20.3670615 6.8579397,19.2122281 L6.8579397,1.13686838e-13 L0.0818665079,1.13686838e-13 L0.0818665079,19.1072432 C0.0818665079,20.3670615 1.11550479,21.3119251 2.37884047,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(108.018304, 18.473379)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M2.37884047,22.151804 L4.56096573,22.151804 C5.82430141,22.151804 6.8579397,21.2069403 6.8579397,20.0521069 L6.8579397,0.944863676 L0.0818665079,0.944863676 L0.0818665079,20.0521069 C0.0818665079,21.2069403 1.11550479,22.151804 2.37884047,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M2.37884047,21.3119251 L4.56096573,21.3119251 C5.82430141,21.3119251 6.8579397,20.3670615 6.8579397,19.2122281 L6.8579397,0.104984853 L0.0818665079,0.104984853 L0.0818665079,19.2122281 C0.0818665079,20.3670615 1.11550479,21.3119251 2.37884047,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(117.252475, 17.718545)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M3.10091485,22.151804 L5.28304011,22.151804 C6.54637579,22.151804 7.58001407,21.2069403 7.58001407,20.0521069 L7.58001407,0.944863676 L0.803940887,0.944863676 L0.803940887,20.0521069 C0.803940887,21.2069403 1.83757917,22.151804 3.10091485,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M3.10091485,21.3119251 L5.28304011,21.3119251 C6.54637579,21.3119251 7.58001407,20.3670615 7.58001407,19.2122281 L7.58001407,0 L0.803940887,0 L0.803940887,19.1072432 C0.803940887,20.3670615 1.83757917,21.3119251 3.10091485,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<g id="Group" transform="translate(127.498072, 17.952659)" fill="#4D4D4D" stroke="#4D4D4D">
<path d="M3.10091485,22.151804 L5.28304011,22.151804 C6.54637579,22.151804 7.58001407,21.2069403 7.58001407,20.0521069 L7.58001407,0.944863676 L0.803940887,0.944863676 L0.803940887,20.0521069 C0.803940887,21.2069403 1.83757917,22.151804 3.10091485,22.151804 Z" id="Path" stroke-width="3.4351145" opacity="0.1"></path>
<path d="M3.10091485,21.3119251 L5.28304011,21.3119251 C6.54637579,21.3119251 7.58001407,20.3670615 7.58001407,19.2122281 L7.58001407,0 L0.803940887,0 L0.803940887,19.1072432 C0.803940887,20.3670615 1.83757917,21.3119251 3.10091485,21.3119251 Z" id="Path" stroke-width="0.687022901"></path>
</g>
<path d="M33.6502555,12.7717235 L7.59661566,12.7717235 C6.97132831,12.7717235 6.55447007,12.3561912 6.55447007,11.7328929 L6.55447007,4.77272765 C6.55447007,4.14942927 6.97132831,3.73389702 7.59661566,3.73389702 L33.6502555,3.73389702 C34.2755429,3.73389702 34.6924011,4.14942927 34.6924011,4.77272765 L34.6924011,11.7328929 C34.6924011,12.2523082 34.2755429,12.7717235 33.6502555,12.7717235 Z" id="Path" stroke="#3D79CC" stroke-width="0.687022901" fill="#4C97FF"></path>
<g id="Group" transform="translate(39.969018, 3.432625)" stroke-width="0.687022901">
<path d="M4.29605911,8.86989672 C2.14802956,8.86989672 0.339162562,7.08464704 0.339162562,4.96466306 L0.339162562,3.96046012 C0.339162562,1.84047613 2.14802956,0.0552264618 4.29605911,0.0552264618 C6.44408867,0.0552264618 8.25295567,1.84047613 8.25295567,3.96046012 L8.25295567,4.96466306 C8.13990148,7.19622515 6.44408867,8.86989672 4.29605911,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.29605911" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.29605911,3.90523366 L8.13990148,3.90523366" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(52.019430, 2.329035)" stroke-width="0.687022901">
<path d="M4.63522167,8.86989672 C2.48719212,8.86989672 0.678325123,7.08464704 0.678325123,4.96466306 L0.678325123,3.96046012 C0.678325123,1.84047613 2.48719212,0.0552264618 4.63522167,0.0552264618 C6.78325123,0.0552264618 8.59211823,1.84047613 8.59211823,3.96046012 L8.59211823,4.96466306 C8.59211823,7.19622515 6.78325123,8.86989672 4.63522167,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="4.63522167" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M4.63522167,3.90523366 L1.92192118,6.69468627" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(64.259612, 2.388771)" stroke-width="0.687022901">
<path d="M3.96945813,8.86989672 C1.82142857,8.86989672 0.0125615764,7.08464704 0.0125615764,4.96466306 L0.0125615764,3.96046012 C0.0125615764,1.84047613 1.82142857,0.0552264618 3.96945813,0.0552264618 C6.11748768,0.0552264618 7.92635468,1.84047613 7.92635468,3.96046012 L7.92635468,4.96466306 C7.92635468,7.19622515 6.23054187,8.86989672 3.96945813,8.86989672 Z" id="Path" stroke="#000000" fill="#000000" opacity="0.1"></path>
<g transform="translate(0.000000, 0.166805)">
<ellipse id="Oval" stroke="#000000" fill="#000000" opacity="0.2" cx="3.96945813" cy="3.90523366" rx="3.95689655" ry="3.90523366"></ellipse>
<path d="M3.96945813,3.90523366 L1.25615764,1.22735915" id="Path" stroke="#FFFFFF" fill="#FFFFFF" opacity="0.1"></path>
</g>
</g>
<g id="Group" transform="translate(129.846718, 4.027621)" fill="#000000" opacity="0.1" stroke="#000000" stroke-width="0.687022901">
<ellipse id="Oval" cx="0.888566243" cy="0.937256078" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="5.6646098" cy="0.937256078" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="10.4406534" cy="0.937256078" rx="1" ry="1"></ellipse>
<g transform="translate(14.306911, 0.000000)" id="Oval">
<ellipse cx="0.909786001" cy="0.937256078" rx="1" ry="1"></ellipse>
<ellipse cx="5.57475878" cy="0.937256078" rx="1" ry="1"></ellipse>
</g>
<ellipse id="Oval" cx="0.888566243" cy="5.74069348" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="5.6646098" cy="5.74069348" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="10.4406534" cy="5.74069348" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="15.2166969" cy="5.74069348" rx="1" ry="1"></ellipse>
<ellipse id="Oval" cx="19.8816697" cy="5.74069348" rx="1" ry="1"></ellipse>
</g>
</g>
<g id="Brush" transform="translate(133.665334, 57.505104) rotate(32.000000) translate(-133.665334, -57.505104) translate(105.165334, 7.505104)">
<g transform="translate(0.198739, 59.266148)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Rectangle" fill="#D9E3F2" xlink:href="#path-1"></use>
<path d="M9.1931763,20.1536099 C8.1753615,28.0189044 -3.82263747,37.5601931 -2.75644256,38.8990826 C-1.69024765,40.2379721 24.2859438,42.9357798 33.2597204,42.9357798 C42.233497,42.9357798 64.0143184,46.7070403 61.1501184,36.9578538 C58.2859184,27.2086673 58.7728959,25.7164202 58.7728959,22.2206833 C58.7728959,18.7249464 58.7728959,15.4320715 52.6895165,20.1536099 C46.6061371,24.8751483 38.7545168,25.5859224 33.2597204,22.2206833 C27.7649241,18.8554442 10.2109911,12.2883154 9.1931763,20.1536099 Z" id="Path-13" fill="#FF6680" mask="url(#mask-2)"></path>
</g>
<g id="Handle" transform="translate(14.450704, 0.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Combined-Shape-Copy" fill="#FFAB19" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy" fill="#CF8B17" x="14.686599" y="55.2158408" width="40.943662" height="7.2"></rect>
</g>
<g id="Hat-Block" transform="translate(602.901108, 40.272764) rotate(-4.000000) translate(-602.901108, -40.272764) translate(562.401108, 18.772764)">
<path d="M80.3940887,35.4800823 C80.3940887,36.753597 79.3891626,37.7871742 78.1609195,37.7871742 L32.1442365,37.7871742 C31.5502135,37.7871742 30.9829885,38.0271117 30.5631527,38.460845 L27.4501149,41.6815453 C27.0302791,42.1106644 26.4630542,42.3552161 25.8690312,42.3552161 L14.3235468,42.3552161 C13.7295238,42.3552161 13.1622989,42.1106644 12.7424631,41.6815453 L9.62942529,38.460845 C9.20958949,38.0271117 8.64236453,37.7871742 8.05280788,37.7871742 L2.23316913,37.7871742 C1.00045977,37.7871742 0,36.753597 0,35.4800823 L0,14.6701135 C5.46582178,7.19712971 13.6130679,3.46063782 24.4417384,3.46063782 C35.2704089,3.46063782 43.417655,7.19712971 48.8834768,14.6701135 L78.1609195,14.6701135 C79.3891626,14.6701135 80.3940887,15.7036907 80.3940887,16.9772054 L80.3940887,35.4800823 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M80.3940887,32.0194445 C80.3940887,33.2929592 79.3891626,34.3265363 78.1609195,34.3265363 L32.1442365,34.3265363 C31.5502135,34.3265363 30.9829885,34.5664739 30.5631527,35.0002072 L27.4501149,38.2209074 C27.0302791,38.6500265 26.4630542,38.8945783 25.8690312,38.8945783 L14.3235468,38.8945783 C13.7295238,38.8945783 13.1622989,38.6500265 12.7424631,38.2209074 L9.62942529,35.0002072 C9.20958949,34.5664739 8.64236453,34.3265363 8.05280788,34.3265363 L2.23316913,34.3265363 C1.00045977,34.3265363 0,33.2929592 0,32.0194445 L0,11.2094757 C5.46582178,3.73649189 13.6130679,6.41580182e-16 24.4417384,0 C35.2704089,0 43.417655,3.73649189 48.8834768,11.2094757 L78.1609195,11.2094757 C79.3891626,11.2094757 80.3940887,12.2430528 80.3940887,13.5165676 L80.3940887,32.0194445 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

20
static/svgs/intro/create.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Action Menu/Actions/Surprise</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M6.99375039,8.65327167 C7.80357478,8.43603525 8.43603525,7.80357478 8.65327167,6.99375039 L9.14824073,5.15274045 C9.38335104,4.28241985 10.6180239,4.28241985 10.8517593,5.15274045 L11.3481032,6.99375039 C11.5653397,7.80357478 12.1978001,8.43603525 13.0062496,8.65327167 L14.8472595,9.14824073 C15.7175802,9.38335104 15.7175802,10.6180239 14.8472595,10.8531342 L13.0062496,11.3481032 C12.1978001,11.5653397 11.5653397,12.1978001 11.3481032,13.0062496 L10.8517593,14.8472595 C10.6180239,15.7175802 9.38335104,15.7175802 9.14824073,14.8472595 L8.65327167,13.0062496 C8.43603525,12.1978001 7.80357478,11.5653397 6.99375039,11.3481032 L5.15274045,10.8531342 C4.28241985,10.6180239 4.28241985,9.38335104 5.15274045,9.14824073 L6.99375039,8.65327167 Z M3.9061823,14.5100817 C4.20079987,14.430095 4.4314281,14.2007999 4.51008165,13.9061823 L4.69005166,13.2369605 C4.77403766,12.9210132 5.22329612,12.9210132 5.30994834,13.2369605 L5.48858524,13.9061823 C5.5685719,14.2007999 5.79786702,14.430095 6.09248459,14.5100817 L6.76303949,14.6900517 C7.07898684,14.7740377 7.07898684,15.2232961 6.76303949,15.3099483 L6.09248459,15.4885852 C5.79786702,15.5685719 5.5685719,15.797867 5.48858524,16.0924846 L5.30994834,16.7617064 C5.22329612,17.0789868 4.77403766,17.0789868 4.69005166,16.7617064 L4.51008165,16.0924846 C4.4314281,15.797867 4.20079987,15.5685719 3.9061823,15.4885852 L3.23696051,15.3099483 C2.92101316,15.2232961 2.92101316,14.7740377 3.23696051,14.6900517 L3.9061823,14.5100817 Z M13.9064844,4.50925154 C14.2012002,4.42923821 14.4305718,4.2012002 14.5092515,3.90648441 L14.6906151,3.23703951 C14.7746291,2.92098683 15.2240373,2.92098683 15.3093849,3.23703951 L15.4894149,3.90648441 C15.5680947,4.2012002 15.7987998,4.42923821 16.0935156,4.50925154 L16.7629605,4.6906151 C17.0790132,4.7746291 17.0790132,5.22403734 16.7629605,5.3093849 L16.0935156,5.4894149 C15.7987998,5.56809468 15.5680947,5.7987998 15.4894149,6.09218203 L15.3093849,6.76162694 C15.2240373,7.07901317 14.7746291,7.07901317 14.6906151,6.76162694 L14.5092515,6.09218203 C14.4305718,5.7987998 14.2012002,5.56809468 13.9064844,5.4894149 L13.2370395,5.3093849 C12.9209868,5.22403734 12.9209868,4.7746291 13.2370395,4.6906151 L13.9064844,4.50925154 Z M5.75,5.75 C5.75,6.164 5.414,6.5 5,6.5 C4.586,6.5 4.25,6.164 4.25,5.75 C4.25,5.336 4.586,5 5,5 C5.414,5 5.75,5.336 5.75,5.75 Z M16,14.25 C16,14.9416667 15.44,15.5 14.75,15.5 C14.0583333,15.5 13.5,14.9416667 13.5,14.25 C13.5,13.56 14.0583333,13 14.75,13 C15.44,13 16,13.56 16,14.25 Z" id="path-1"></path>
</defs>
<g id="Action-Menu/Actions/Surprise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="surprise-icon" fill="#FFFFFF" xlink:href="#path-1"></use>
<g id="Color/1_Yellow" mask="url(#mask-2)" fill="#FFBF00">
<g id="Color/Yellow/1_Yellow">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

32
static/svgs/intro/hat-block.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="122px" height="81px" viewBox="0 0 122 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Hat Block Tap</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M39.8884411,39.9863208 C40.5832165,32.1028273 47.0547731,28.7414197 49.1765471,26.1194211 C52.9045908,21.5111724 43.1208996,18.9838202 36.9035097,28.1093829 C33.349691,33.3252778 29.9021071,28.2604991 28.6753611,24.0462129 C27.0611238,18.4999833 23.5960111,9.02022543 22.0380782,4.6701998 C20.2785648,-0.241606927 14.0545352,2.32047545 15.5001249,6.74022662 C17.0110489,11.3606707 19.6387659,20.3162939 20.6615412,23.1654971 C20.8272674,23.6267992 20.9871508,24.2718267 20.6105485,24.3919243 C20.0384743,24.5740591 19.852829,23.8463153 19.4682591,22.8113019 C17.3252382,17.0370724 10.1939637,20.0893545 12.7428014,25.6196772 C12.9528807,26.075677 13.636767,27.2999833 13.3467461,27.543625 C12.9993584,27.8355179 12.6501116,27.6992482 12.4118801,27.2398019 C9.81417437,22.2344092 4.23977038,25.2501053 6.74637979,29.9614842 C7.13785492,30.6971815 7.30225322,31.127465 6.96389548,31.3480416 C6.67573367,31.5362741 6.46193619,31.5193067 5.98998822,30.7928884 C4.0342061,27.7803737 -0.565493875,30.9294232 1.5395481,34.4313423 C5.25085981,40.6043065 7.34713741,46.1221688 10.0943686,50.1384132 C16.5752207,59.6128687 38.5902522,54.7169689 39.8884411,39.9863208" id="path-1"></path>
</defs>
<g id="Sketches" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="V4_Logged-out-(Video-Button)" transform="translate(-1034.000000, -389.000000)">
<g id="Masthead" transform="translate(0.000000, 48.000000)">
<g id="Hat-Block-Tap" transform="translate(1031.000000, 327.000000)">
<g id="Hat-Block" transform="translate(62.501943, 40.600635) rotate(-10.000000) translate(-62.501943, -40.600635) translate(4.501943, 9.600635)">
<path d="M115.32408,51.3751501 C115.32408,53.1760003 113.88658,54.6375599 112.129635,54.6375599 L46.3049131,54.6375599 C45.4551909,54.6375599 44.643802,54.9768505 44.0432464,55.5901836 L39.5901909,60.1445076 C38.9896353,60.7513159 38.1782464,61.0971313 37.3285242,61.0971313 L20.8132464,61.0971313 C19.9635242,61.0971313 19.1521353,60.7513159 18.5515798,60.1445076 L14.0985242,55.5901836 C13.4979687,54.9768505 12.6865798,54.6375599 11.8432464,54.6375599 L3.51852421,54.6375599 C1.75519088,54.6375599 0.324079764,53.1760003 0.324079764,51.3751501 L0.324079764,21.9482136 C8.14268328,11.3808254 19.7969395,6.09713131 35.2868483,6.09713131 C50.7767572,6.09713131 62.4310134,11.3808254 70.2496169,21.9482136 L112.129635,21.9482136 C113.88658,21.9482136 115.32408,23.4097732 115.32408,25.2106234 L115.32408,51.3751501 Z" id="Fill-3-Copy" fill="#E6AC00"></path>
<path d="M115.207513,46.2774631 C115.207513,48.0783134 113.770013,49.5398729 112.013068,49.5398729 L46.1883462,49.5398729 C45.338624,49.5398729 44.5272351,49.8791636 43.9266796,50.4924966 L39.473624,55.0468207 C38.8730685,55.6536289 38.0616796,55.9994444 37.2119573,55.9994444 L20.6966796,55.9994444 C19.8469573,55.9994444 19.0355685,55.6536289 18.4350129,55.0468207 L13.9819573,50.4924966 C13.3814018,49.8791636 12.5700129,49.5398729 11.7266796,49.5398729 L3.40195734,49.5398729 C1.63862401,49.5398729 0.2075129,48.0783134 0.2075129,46.2774631 L0.2075129,16.8505267 C8.02611642,6.28313847 19.6803726,0.999444365 35.1702815,0.999444365 C50.6601903,0.999444365 62.3144465,6.28313847 70.13305,16.8505267 L112.013068,16.8505267 C113.770013,16.8505267 115.207513,18.3120863 115.207513,20.1129365 L115.207513,46.2774631 Z" id="Fill-3" fill="#FFBF00"></path>
</g>
<g id="Tap" transform="translate(75.000000, 29.000000)">
<path d="M25.895567,13.4202475 C25.1815426,10.0217326 22.1667001,7.47005432 18.5558813,7.47005432 C14.4137457,7.47005432 11.0558813,10.8279187 11.0558813,14.9700543 C11.0558813,18.5731364 13.5966366,21.5827933 16.9842407,22.3051186" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.75" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.475724, 14.887586) rotate(32.000000) translate(-18.475724, -14.887586) "></path>
<path d="M29.0723292,23.2937242 C30.8556116,21.0055414 31.9179225,18.1279033 31.9179225,15.0021493 C31.9179225,7.54630515 25.8737666,1.50214928 18.4179225,1.50214928 C10.9620784,1.50214928 4.91792248,7.54630515 4.91792248,15.0021493 C4.91792248,18.8140893 6.497839,22.2570201 9.03857301,24.7118426" id="Path" stroke="#FFFFFF" stroke-width="2.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.417922, 13.106996) rotate(-3.000000) translate(-18.417922, -13.106996) "></path>
<g id="Group-2" transform="translate(0.000000, 11.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Fill-1" fill="#3D79CC" xlink:href="#path-1"></use>
<path d="M38.8884411,37.9863208 C39.5832165,30.1028273 46.0547731,26.7414197 48.1765471,24.1194211 C51.9045908,19.5111724 42.1208996,16.9838202 35.9035097,26.1093829 C32.349691,31.3252778 28.9021071,26.2604991 27.6753611,22.0462129 C26.0611238,16.4999833 22.5960111,7.02022543 21.0380782,2.6701998 C19.2785648,-2.24160693 13.0545352,0.320475452 14.5001249,4.74022662 C16.0110489,9.36067071 18.6387659,18.3162939 19.6615412,21.1654971 C19.8272674,21.6267992 19.9871508,22.2718267 19.6105485,22.3919243 C19.0384743,22.5740591 18.852829,21.8463153 18.4682591,20.8113019 C16.3252382,15.0370724 9.19396368,18.0893545 11.7428014,23.6196772 C11.9528807,24.075677 12.636767,25.2999833 12.3467461,25.543625 C11.9993584,25.8355179 11.6501116,25.6992482 11.4118801,25.2398019 C8.81417437,20.2344092 3.23977038,23.2501053 5.74637979,27.9614842 C6.13785492,28.6971815 6.30225322,29.127465 5.96389548,29.3480416 C5.67573367,29.5362741 5.46193619,29.5193067 4.98998822,28.7928884 C3.0342061,25.7803737 -1.56549387,28.9294232 0.539548101,32.4313423 C4.25085981,38.6043065 6.34713741,44.1221688 9.09436858,48.1384132 C15.5752207,57.6128687 37.5902522,52.7169689 38.8884411,37.9863208" id="Fill-1" fill="#4C97FF" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

20
static/svgs/intro/join.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Player Controls/Turbo</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M12.7465228,2.459606 C13.804317,1.48385475 14.8548295,2.16701773 14.4141054,3.52112549 L12.9207305,8.10946219 C12.8030233,8.47111293 12.9957208,8.84314115 13.3559016,8.95871573 L13.90044,9.13344687 C15.1002812,9.51845114 15.371114,10.7275224 14.4495532,11.5769599 L8.25062461,17.2907475 C7.19257415,18.2659928 6.14209654,17.5828115 6.58280341,16.2287567 L8.07617834,11.6404201 C8.19391207,11.2786877 8.0017643,10.9073258 7.6427156,10.79227 L7.09879453,10.6179725 C5.89933742,10.2336109 5.62934908,9.02476911 6.55027117,8.17527407 L12.7465228,2.459606 Z" id="path-1"></path>
</defs>
<g id="Player-Controls/Turbo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="turbo-bolt" fill="#FF8C1A" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Color/1_Yellow" mask="url(#mask-2)" fill="#FFBF00">
<g id="Color/Yellow/1_Yellow">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

111
static/svgs/intro/video-image.svg Normal file
View file

@ -0,0 +1,111 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400px" height="225px" viewBox="0 0 400 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Video Image</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="22.8360922%" y1="11.646156%" x2="32.8531095%" y2="85.7162611%" id="linearGradient-1">
<stop stop-color="#666E8A" offset="0%"></stop>
<stop stop-color="#575E75" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="264" height="148.180418" rx="12"></rect>
<filter x="-13.6%" y="-24.3%" width="127.3%" height="148.6%" filterUnits="objectBoundingBox" id="filter-4">
<feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="9.71980676" y="20.1974253" width="4.04991948" height="6.46317609" rx="2.02495974"></rect>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-7" x="43.7391304" y="20.1974253" width="4.04991948" height="6.46317609" rx="2.02495974"></rect>
<filter x="-0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-9" x="26.7294686" y="25.0448074" width="4.04991948" height="6.46317609" rx="2.02495974"></rect>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M1.61996779,8.07897011 L2.42993559,8.07897011 C2.87728624,8.07897011 3.23993559,8.44161947 3.23993559,8.88897011 L3.23993559,13.7321462 C3.23993559,14.1794969 2.87728624,14.5421462 2.42993559,14.5421462 L1.61996779,14.5421462 C0.725284286,14.5421462 3.31611734e-16,13.8168619 2.22044605e-16,12.9221784 L0,9.69893791 C-1.09567129e-16,8.8042544 0.725284286,8.07897011 1.61996779,8.07897011 Z" id="path-11"></path>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M55.0789211,8.07897011 L55.8888889,8.07897011 C56.7835724,8.07897011 57.5088567,8.8042544 57.5088567,9.69893791 L57.5088567,12.9221784 C57.5088567,13.8168619 56.7835724,14.5421462 55.8888889,14.5421462 L55.0789211,14.5421462 C54.6315704,14.5421462 54.2689211,14.1794969 54.2689211,13.7321462 L54.2689211,8.88897011 C54.2689211,8.44161947 54.6315704,8.07897011 55.0789211,8.07897011 Z" id="path-13"></path>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-14">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Video-Image" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(21.000000, 13.000000)">
<g transform="translate(47.000000, 24.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle" fill="#4D97FF" mask="url(#mask-3)" x="0" y="139.969697" width="264" height="10.5353535"></rect>
<rect id="Rectangle" fill="#FFFFFF" opacity="0.2" mask="url(#mask-3)" x="0" y="139.969697" width="78" height="10.5353535"></rect>
<g id="Play" mask="url(#mask-3)" fill="#FFFFFF">
<g transform="translate(115.500000, 52.676768)" id="play-icon">
<path d="M36.2613556,26.399295 L10.8348186,40.3420327 C7.41462053,42.2175112 3.00891294,41.1566309 0.994395258,37.9724901 C0.343344736,36.9434415 -4.97379915e-14,35.7709211 -4.97379915e-14,34.5766358 L-4.97379915e-14,6.69116043 C-4.97379915e-14,2.99573457 3.21782425,-4.26325641e-14 7.18721163,-4.26325641e-14 C8.47003567,-4.26325641e-14 9.72948118,0.319647567 10.8348186,0.925763502 L36.2613556,14.8685012 C39.6815536,16.7439797 40.8210827,20.8456116 38.806565,24.0297524 C38.1877814,25.0077999 37.311911,25.823219 36.2613556,26.399295 Z"></path>
</g>
</g>
</g>
<g id="C---Block" transform="translate(261.000000, 0.000000)">
<g id="C-Block" transform="translate(48.395879, 39.067544) rotate(10.000000) translate(-48.395879, -39.067544) translate(4.895879, 7.067544)">
<path d="M15.9899553,38.142214 C16.5485472,38.142214 17.0855331,38.3648631 17.4807632,38.7605664 L20.461325,41.7462798 C20.8565551,42.1419831 21.3930141,42.3646322 21.9521329,42.3646322 L28.637318,42.3646322 C29.1964369,42.3646322 29.7328958,42.1419831 30.1281259,41.7462798 L33.1086877,38.7605664 C33.5039178,38.3643355 34.0409038,38.142214 34.5994956,38.142214 L84.3157515,38.1437968 C85.4798359,38.1437968 86.4236453,39.0887364 86.4236453,40.2542145 L86.4236453,52.9167205 C86.4236453,54.0821986 85.4798359,55.0271381 84.3157515,55.0271381 L26.1679205,55.0271381 C25.6088016,55.0271381 25.0723427,55.2497872 24.6771126,55.6454905 L21.6965508,58.6296211 C21.3013207,59.0253244 20.7648617,59.2479735 20.2057429,59.2479735 L13.5205577,59.2479735 C12.9614389,59.2479735 12.4249799,59.0253244 12.0297498,58.6296211 L9.04918803,55.6454905 C8.65343097,55.2497872 8.11749898,55.0271381 7.55838015,55.0271381 L2.10789379,55.0271381 C0.943809444,55.0271381 4.54747351e-13,54.0821986 4.54747351e-13,52.9167205 L4.54747351e-13,2.11041766 C4.54747351e-13,0.944939509 0.943809444,-1.36424205e-12 2.10789379,-1.36424205e-12 L7.55838015,-1.36424205e-12 C8.11697201,-1.36424205e-12 8.65395795,0.222121459 9.04918803,0.618352375 L12.0297498,3.60406576 C12.4249799,3.99976908 12.9614389,4.22241814 13.5205577,4.22241814 L20.2057429,4.22241814 C20.7648617,4.22241814 21.3013207,3.99976908 21.6965508,3.60406576 L24.6771126,0.618352375 C25.0723427,0.222121459 25.6088016,-1.36424205e-12 26.1679205,-1.36424205e-12 L84.3157515,-1.36424205e-12 C85.4798359,-1.36424205e-12 86.4236453,0.944939509 86.4236453,2.11041766 L86.4236453,23.2145943 C86.4236453,24.3800724 85.4798359,25.325012 84.3157515,25.325012 L34.5994956,25.325012 C34.0403768,25.325012 33.5039178,25.5471334 33.1086877,25.9433643 L30.1281259,28.9290777 C29.7328958,29.324781 29.1964369,29.5474301 28.637318,29.5474301 L21.9521329,29.5474301 C21.3930141,29.5474301 20.8565551,29.324781 20.461325,28.9290777 L17.4807632,25.9433643 C17.0855331,25.5471334 16.5490741,25.325012 15.9899553,25.325012 L10.5394689,25.325012 C9.3753846,25.325012 8.43157515,26.2699515 8.43157515,27.4354296 L8.43157515,36.032324 C8.43157515,37.1978021 9.3753846,38.1427416 10.5394689,38.1427416 L15.9899553,38.142214 Z" id="Fill-1-Copy-2" fill="#EC9C13"></path>
<path d="M15.9899553,42.142214 C16.5485472,42.142214 17.0855331,42.3648631 17.4807632,42.7605664 L20.461325,45.7462798 C20.8565551,46.1419831 21.3930141,46.3646322 21.9521329,46.3646322 L28.637318,46.3646322 C29.1964369,46.3646322 29.7328958,46.1419831 30.1281259,45.7462798 L33.1086877,42.7605664 C33.5039178,42.3643355 34.0409038,42.142214 34.5994956,42.142214 L84.3157515,42.1437968 C85.4798359,42.1437968 86.4236453,43.0887364 86.4236453,44.2542145 L86.4236453,56.9167205 C86.4236453,58.0821986 85.4798359,59.0271381 84.3157515,59.0271381 L26.1679205,59.0271381 C25.6088016,59.0271381 25.0723427,59.2497872 24.6771126,59.6454905 L21.6965508,62.6296211 C21.3013207,63.0253244 20.7648617,63.2479735 20.2057429,63.2479735 L13.5205577,63.2479735 C12.9614389,63.2479735 12.4249799,63.0253244 12.0297498,62.6296211 L9.04918803,59.6454905 C8.65343097,59.2497872 8.11749898,59.0271381 7.55838015,59.0271381 L2.10789379,59.0271381 C0.943809444,59.0271381 4.54747351e-13,58.0821986 4.54747351e-13,56.9167205 L4.54747351e-13,6.11041766 C4.54747351e-13,4.94493951 0.943809444,4 2.10789379,4 L7.55838015,4 C8.11697201,4 8.65395795,4.22212146 9.04918803,4.61835238 L12.0297498,7.60406576 C12.4249799,7.99976908 12.9614389,8.22241814 13.5205577,8.22241814 L20.2057429,8.22241814 C20.7648617,8.22241814 21.3013207,7.99976908 21.6965508,7.60406576 L24.6771126,4.61835238 C25.0723427,4.22212146 25.6088016,4 26.1679205,4 L84.3157515,4 C85.4798359,4 86.4236453,4.94493951 86.4236453,6.11041766 L86.4236453,27.2145943 C86.4236453,28.3800724 85.4798359,29.325012 84.3157515,29.325012 L34.5994956,29.325012 C34.0403768,29.325012 33.5039178,29.5471334 33.1086877,29.9433643 L30.1281259,32.9290777 C29.7328958,33.324781 29.1964369,33.5474301 28.637318,33.5474301 L21.9521329,33.5474301 C21.3930141,33.5474301 20.8565551,33.324781 20.461325,32.9290777 L17.4807632,29.9433643 C17.0855331,29.5471334 16.5490741,29.325012 15.9899553,29.325012 L10.5394689,29.325012 C9.3753846,29.325012 8.43157515,30.2699515 8.43157515,31.4354296 L8.43157515,40.032324 C8.43157515,41.1978021 9.3753846,42.1427416 10.5394689,42.1427416 L15.9899553,42.142214 Z" id="Fill-1" fill="#FFAB19"></path>
</g>
</g>
<g id="Command-Block-Copy-2" transform="translate(40.895658, 116.294786) rotate(-10.000000) translate(-40.895658, -116.294786) translate(2.895658, 96.294786)">
<path d="M75.1620924,7.35549439 L75.1620924,30.9519204 C75.1620924,32.5760136 73.8665931,33.8941182 72.2703529,33.8941182 L41.623698,33.8941182 C40.8544953,33.8941182 40.1199935,34.2001067 39.5821299,34.7532399 L35.5452616,38.860548 C35.0073981,39.4077968 34.2728963,39.7196697 33.5036936,39.7196697 L18.547617,39.7196697 C17.7841978,39.7196697 17.0496959,39.4077968 16.5002654,38.860548 L12.4749641,34.7532399 C11.9313171,34.2001067 11.1910318,33.8941182 10.4276125,33.8941182 L2.89173947,33.8941182 C1.29549928,33.8941182 0,32.5760136 0,30.9519204 L0,7.35549439 C0,5.73140123 1.29549928,4.41329664 2.89173947,4.41329664 L10.3697778,4.41329664 C11.1389805,4.41329664 11.8734823,4.7251696 12.4113458,5.27241838 L16.5002654,9.43857041 C17.0496959,9.98581919 17.7841978,10.2976922 18.547617,10.2976922 L33.5036936,10.2976922 C34.2728963,10.2976922 35.0073981,9.98581919 35.5452616,9.43857041 L39.6341812,5.27241838 C40.1836117,4.7251696 40.9181136,4.41329664 41.6815328,4.41329664 L72.2703529,4.41329664 C73.8665931,4.41329664 75.1620924,5.73140123 75.1620924,7.35549439" id="Fill-6-Copy" fill="#BD42BD"></path>
<path d="M75.1620924,26.5386238 C75.1620924,28.1627169 73.8665931,29.4808215 72.2703529,29.4808215 L41.623698,29.4808215 C40.8544953,29.4808215 40.1199935,29.7868101 39.5821299,30.3399433 L35.5452616,34.4472513 C35.0073981,34.9945001 34.2728963,35.3063731 33.5036936,35.3063731 L18.547617,35.3063731 C17.7841978,35.3063731 17.0496959,34.9945001 16.5002654,34.4472513 L12.4749641,30.3399433 C11.9313171,29.7868101 11.1910318,29.4808215 10.4276125,29.4808215 L2.89173947,29.4808215 C1.29549928,29.4808215 0,28.1627169 0,26.5386238 L0,2.94219776 C0,1.3181046 1.29549928,0 2.89173947,0 L10.3697778,0 C11.1389805,0 11.8734823,0.311872962 12.4113458,0.859121745 L16.5002654,5.02527377 C17.0496959,5.57252255 17.7841978,5.88439551 18.547617,5.88439551 L33.5036936,5.88439551 C34.2728963,5.88439551 35.0073981,5.57252255 35.5452616,5.02527377 L39.6341812,0.859121745 C40.1836117,0.311872962 40.9181136,0 41.6815328,0 L72.2703529,0 C73.8665931,0 75.1620924,1.3181046 75.1620924,2.94219776 L75.1620924,26.5386238 Z" id="Fill-6" fill="#CF63CF"></path>
</g>
<g id="Snare" transform="translate(309.957952, 149.325367) rotate(20.000000) translate(-309.957952, -149.325367) translate(280.957952, 106.325367)">
<g id="Snare-Bottom" transform="translate(0.000000, 37.163263)">
<path d="M3.23993559,18.8408053 C3.23993559,29.3262514 14.6631631,37.826385 28.7544283,37.826385 C42.8456936,37.826385 54.2689211,29.3262514 54.2689211,18.8408053 L54.2689211,1.09547363 L3.23993559,1.09547363 C3.23993559,5.93539727 3.23993559,11.8505078 3.23993559,18.8408053 Z" id="Bottom" fill="#FF661A"></path>
<path d="M28.7544283,19.4609293 L28.7544283,38.7790565" id="Line-2" stroke="#E64D00" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M45.7640902,14.6135473 L45.7640902,33.9316745" id="Line-2-Copy" stroke="#E64D00" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M11.7447665,14.6135473 L11.7447665,33.9316745" id="Line-2-Copy-2" stroke="#E64D00" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2.42995169,0.879298066 L2.42995169,20.1974253" id="Line-2-Copy-3" stroke="#E64D00" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M55.078905,0.879298066 L55.078905,20.1974253" id="Line-2-Copy-4" stroke="#E64D00" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#E5F0FF" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<g id="Rectangle-Copy-2">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#E5F0FF" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
<g id="Rectangle-Copy-3">
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<use fill="#E5F0FF" fill-rule="evenodd" xlink:href="#path-9"></use>
</g>
<g id="Rectangle-Copy-4">
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use fill="#E5F0FF" fill-rule="evenodd" xlink:href="#path-11"></use>
</g>
<g id="Rectangle-Copy-5">
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
<use fill="#E5F0FF" fill-rule="evenodd" xlink:href="#path-13"></use>
</g>
<path d="M3.23993559,7.24267047 C3.23993559,17.7281166 14.6631631,26.2282502 28.7544283,26.2282502 C42.8456936,26.2282502 54.2689211,17.7281166 54.2689211,7.24267047 L54.2689211,2.22962275 L3.23993559,2.22962275 C3.23993559,-1.41864288 3.23993559,0.252373025 3.23993559,7.24267047 Z" id="Bottom" fill-opacity="0.1" fill="#000000"></path>
</g>
<g id="Snare-Top" transform="translate(3.239936, 19.389528)">
<ellipse id="Top" stroke="#E64D00" stroke-width="1.62" fill="#FFFFFF" cx="25.5144928" cy="18.9855798" rx="24.7044928" ry="18.1755798"></ellipse>
<ellipse id="Top" stroke-opacity="0.15" stroke="#000000" stroke-width="0.81" cx="25.5144928" cy="18.9855798" rx="18.6296216" ry="13.7331977"></ellipse>
</g>
<path d="M42.7411891,-1.33354316 C45.1056763,-1.33354316 43.2193715,3.04461406 43.2193715,6.73535982 C43.2193715,10.4261056 44.3611569,30.4707951 44.3611569,34.7633978 C44.3611569,37.6251329 43.8211676,39.0577694 42.7411891,39.0613074 C41.6612106,39.0577694 41.1212213,37.6251329 41.1212213,34.7633978 C41.1212213,30.4707951 42.2630068,10.4261056 42.2630068,6.73535982 C42.2630068,3.04461406 40.376702,-1.33354316 42.7411891,-1.33354316 Z" id="dri" fill="#CC9900" transform="translate(42.741189, 18.863882) rotate(210.000000) translate(-42.741189, -18.863882) "></path>
<path d="M20.2984454,44.7106527 C22.6629326,44.7106527 20.7766278,49.0888099 20.7766278,52.7795557 C20.7766278,56.4703014 21.9184132,76.5149909 21.9184132,80.8075936 C21.9184132,83.6693287 21.378424,85.1019653 20.2984454,85.1055032 C19.2184669,85.1019653 18.6784776,83.6693287 18.6784776,80.8075936 C18.6784776,76.5149909 19.8202631,56.4703014 19.8202631,52.7795557 C19.8202631,49.0888099 17.9339583,44.7106527 20.2984454,44.7106527 Z" id="Combined-Shape-Copy-3" fill="#CC9900" transform="translate(20.298445, 64.908078) rotate(10.000000) translate(-20.298445, -64.908078) "></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB