scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-14 15:09:59 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

boop

Browse source 
upside down

load fake results

working on rainbow

rainbow

small change

secret life

remove fake results
This commit is contained in:
seotts 2018-03-28 15:16:02 -04:00 committed by Karishma Chadha
parent f861d912e1
commit 14b87afe7e
6 changed files with 154 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/grid/grid.jsx
View file

@ -9,7 +9,9 @@ const thumbnailUrl = require('../../lib/user-thumbnail');
require('./grid.scss');
const Grid = props => (
<div className={classNames('grid', props.className)}>
<div
className={classNames('grid', props.className, )}
>
<FlexRow>
{props.items.map((item, key) => {
const href = `/${props.itemType}/${item.id}/`;
@ -19,6 +21,7 @@ const Grid = props => (
avatar={thumbnailUrl(item.author.id)}
creator={item.author.username}
favorites={item.stats.favorites}
isUpsideDown={props.isUpsideDown}
href={href}
key={key}
loves={item.stats.loves}
@ -38,6 +41,7 @@ const Grid = props => (
return (
<Thumbnail
href={href}
isUpsideDown={props.isUpsideDown}
key={key}
owner={item.owner}
src={item.image}
@ -52,6 +56,7 @@ const Grid = props => (
Grid.propTypes = {
className: PropTypes.string,
isUpsideDown: PropTypes.bool,
itemType: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.object),
showAvatar: PropTypes.bool,

10
src/components/grid/grid.scss
View file

@ -11,6 +11,16 @@
$project-height: 208px;
$gallery-height: 164px;
&.cat {
background-image: url("/svgs/space-cat.svg");
background-size: contain;
background-repeat: no-repeat;
.thumbnail {
opacity: .85;
}
}
.flex-row {
margin: 0 auto;
padding: 12px 0;

7
src/components/thumbnail/thumbnail.jsx
View file

@ -110,12 +110,16 @@ const Thumbnail = props => {
</a>
);
}
const surpriseClass = props.isUpsideDown ? 'upsideDown' : '';
return (
<div
className={classNames(
'thumbnail',
props.type,
props.className
props.className,
surpriseClass
)}
>
{imgElement}
@ -136,6 +140,7 @@ Thumbnail.propTypes = {
className: PropTypes.string,
creator: PropTypes.string,
favorites: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
isUpsideDown: PropTypes.bool,
href: PropTypes.string,
linkTitle: PropTypes.bool,
loves: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

4
src/components/thumbnail/thumbnail.scss
View file

@ -112,4 +112,8 @@
height: $gallery-height;
}
}
&.upsideDown {
transform: rotate(180deg);
}
}

57
src/views/search/search.jsx
View file

@ -17,6 +17,7 @@ const Tabs = require('../../components/tabs/tabs.jsx');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const classNames = require('classnames');
const ACCEPTABLE_MODES = ['trending', 'popular'];
@ -29,7 +30,8 @@ class Search extends React.Component {
'getSearchState',
'handleChangeSortMode',
'handleGetSearchMore',
'getTab'
'getTab',
'tick'
]);
this.state = this.getSearchState();
this.state.loaded = [];
@ -38,6 +40,12 @@ class Search extends React.Component {
this.state.offset = 0;
this.state.loadMore = false;
this.state.isUpsideDown = false;
this.state.isRainbow = false;
this.state.isSecret = false;
this.state.elapsed = 0;
let mode = '';
const query = window.location.search;
const m = query.lastIndexOf('mode=');
@ -54,7 +62,6 @@ class Search extends React.Component {
if (ACCEPTABLE_MODES.indexOf(mode) !== -1) {
this.state.mode = mode;
}
}
componentDidMount () {
// just in case there's a URL in the wild with pluses to indicate spaces,
@ -86,13 +93,22 @@ class Search extends React.Component {
// Error means that term was not URI encoded and decoding failed.
// We can silence this error because not all query strings are intended to be decoded.
}
this.props.dispatch(navigationActions.setSearchTerm(term));
}
componentDidUpdate (prevProps) {
if (this.props.searchTerm !== prevProps.searchTerm) {
this.setEasterEggs(this.props.searchTerm);
this.handleGetSearchMore();
}
}
tick () {
this.setState(prevState => (
{elapsed: (prevState.elapsed + 10) % 360}
));
}
encodeSearchTerm () {
let termText = '';
if (this.props.searchTerm) {
@ -122,6 +138,23 @@ class Search extends React.Component {
window.location = newLocation;
}
}
setEasterEggs (term) {
if (term === 'upside down' || term === 'upsidedown' || term === 'upside-down') {
this.setState({isUpsideDown: true});
}
if (term.includes('rainbow')) {
this.setState({isRainbow: true});
setInterval(this.tick, 200);
}
if (term.includes('secret life')) {
this.setState({isSecret: true});
setInterval(this.tick, 200);
}
}
handleGetSearchMore () {
const termText = this.encodeSearchTerm();
const locale = this.props.intl.locale;
@ -180,11 +213,14 @@ class Search extends React.Component {
}
return allTab;
}
getProjectBox () {
const results = (
<Grid
cards
className={this.state.isSecret ? 'cat' : null}
showAvatar
isUpsideDown={this.state.isUpsideDown}
itemType={this.state.tab}
items={this.state.loaded}
showFavorites={false}
@ -193,6 +229,7 @@ class Search extends React.Component {
/>
);
let searchAction = null;
if (this.state.loaded.length === 0 && this.state.offset !== 0) {
searchAction = <h2 className="search-prompt"><FormattedMessage id="general.searchEmpty" /></h2>;
} else if (this.state.loadMore) {
@ -208,16 +245,30 @@ class Search extends React.Component {
<div
id="projectBox"
key="projectBox"
style={this.fancyStyle()}
>
{results}
{searchAction}
</div>
);
}
fancyStyle () {
if (this.state.isRainbow) {
return {
filter: `hue-rotate(${this.state.elapsed}deg) saturate(400%)`
};
}
return {};
}
render () {
return (
<div>
<div className="outer">
<div
className="outer"
>
<TitleBanner className="masthead">
<div className="inner">
<h1 className="title-banner-h1">

74
static/svgs/space-cat.svg Normal file
View file

@ -0,0 +1,74 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="90.99702453613281" height="102.05416107177734" viewBox="-0.5393884181976318 -0.07916021347045898 90.99702453613281 102.05416107177734">
<!-- Exported by Scratch - http://scratch.mit.edu/ -->
<g id="ID0.09973295871168375">
<g id="ID0.38591043977066875">
<path id="ID0.5587377939373255" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 47.2 37.3 C 47.2 37.3 48.4 33.3 52 30.7 C 56.8 27.4 62.3 26.5 61.3 23.1 C 59.8 17.6 52.2 19.8 46.7 25.1 C 41.3 30.4 42.4 33.3 42.4 33.3 C 42.4 33.3 42.1 38.9 47.2 37.3 Z "/>
<g id="ID0.9676653761416674">
<path id="ID0.0763801415450871" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 37.1 24.1 C 37.1 24.1 33 20.1 29.3 12.1 C 27.7 8.6 36.1 8.9 32 2.7 C 30.8 0.9 22.8 5.7 21.4 7.3 C 20.1 8.8 20 9.7 21.3 11.3 C 25.8 17.1 26.7 26.2 26.7 26.2 "/>
<path id="ID0.055647328961640596" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 30.2 9.5 C 30.2 9.5 29.1 10.3 27.7 10.7 "/>
</g>
<g id="Layer_3_7_">
<path id="ID0.09487091470509768" fill="#FAA51F" d="M 17.2 39.8 C 15.2 41.3 13.1 43.5 11.9 46.6 C 9.3 53.6 11.6 61.7 7.2 61.6 C 2.8 61.6 -3.4 49.8 5.6 40.4 C 8.7 37.2 12.1 35.4 14.9 34 C 15.6 33.6 22.1 30.9 25.9 32.9 C 29.6 34.8 28.6 36.4 28.1 37.2 C 27.5 38 19.9 37.6 17.2 39.8 Z " stroke-width="1"/>
<path id="ID0.206121654715389" fill="#FFFFFF" d="M 7.5 61.6 C 5.4 62 2.1 58.2 1.3 54.6 C 0.5 51 1.3 48.2 1.8 46.4 C 2.7 44.7 2.6 49.4 5.3 50 C 8 50.6 11.4 48.1 11.4 48.1 C 11.4 48.1 10.6 53.4 10.2 56.4 C 9.9 59.1 9.6 61 7.5 61.6 Z " stroke-width="1"/>
<path id="ID0.7381807691417634" fill="none" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 17.2 39.8 C 15.2 41.3 13.1 43.5 11.9 46.6 C 9.3 53.6 11.6 61.7 7.2 61.6 C 2.8 61.6 -3.4 49.8 5.6 40.4 C 8.7 37.2 12.1 35.4 14.9 34 C 15.6 33.6 22.1 30.9 25.9 32.9 C 29.6 34.8 28.6 36.4 28.1 37.2 C 27.5 38 19.9 37.6 17.2 39.8 Z "/>
</g>
<g id="Layer_2_14_">
<path id="ID0.0715795997530222" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 32 31.9 "/>
</g>
<path id="ID0.4700182010419667" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 45.3 31.1 C 40.6 26.4 34.8 18.2 26.4 26.5 C 18 34.8 25 40.5 29.7 45.3 C 34.4 50 38.6 48.5 43.4 43.7 C 48.3 38.9 50 35.8 45.3 31.1 Z "/>
<path id="ID0.8155788099393249" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 37.4 47.8 C 37.4 47.8 30.8 47.7 27.1 52.3 C 25.2 54.7 24.9 61.6 20.2 60.9 C 14.5 60 16.3 51.1 22.3 46.4 C 27.7 42.2 30.4 43 30.4 43 "/>
<path id="ID0.9267381150275469" fill="#FFFFFF" d="M 41.4 30.8 C 38.4 27.8 34.7 22.7 30.1 27.3 C 25.5 31.9 29.9 35.5 32.9 38.5 C 35.9 41.5 38.3 40.8 40.9 38.2 C 43.5 35.6 44.4 33.8 41.4 30.8 Z " stroke-width="1"/>
<g id="ID0.5876337415538728">
<path id="ID0.6729683084413409" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 24.1 38.8 C 24.1 38.8 21.2 33.4 13.5 29 C 10.2 27.1 10.3 34.4 4.6 29.4 C 2.7 27.8 7.5 22 9.2 20.5 C 10.8 19.1 12.2 19.2 13.7 20.6 C 16.8 23.4 24.9 28 24.9 28 "/>
<path id="ID0.6592974476516247" fill="#FAA51F" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 10.6 29.7 C 10.6 29.7 11.7 28.6 12.3 27.2 "/>
</g>
<g id="Layer_2_13_">
<path id="ID0.0841677337884903" fill="#FAA51F" d="M 61.9 30.1 C 61.4 30 60.9 30 60.4 29.9 L 60.4 29.9 C 58.1 30.5 55.6 31.4 52.9 32.7 C 36.2 40.6 27.3 53.3 28.4 66.3 C 29.4 78.6 44.3 82.9 45.1 83.1 L 49.3 90.5 L 49.3 90.5 L 54.2 99.1 L 56.9 91.7 L 59.4 85 C 59.4 85 63.9 83.7 67.7 81.2 C 69.1 80.3 71.5 78.3 72.6 77.3 L 75.4 76.8 L 83.8 77.9 L 85.4 78.1 L 84.7 76.5 L 80.9 67.5 C 80.9 67.5 83.1 60.1 82.8 56.4 C 82.2 50.3 79.6 46.7 79.6 46.7 C 79.6 46.7 81.3 44.4 82 41.4 C 81.9 41.2 81.7 41.1 81.6 40.9 C 76.5 34.8 69.4 31.1 61.9 30.1 Z " stroke-width="1"/>
<path id="ID0.5103519866243005" fill="#FFFFFF" d="M 61.9 30.1 C 59.2 30.7 56.3 31.7 53.2 33.3 C 49.6 35 46.4 36.6 42 39.8 C 35.1 44.8 30.9 54.6 38 63.1 C 42.1 68 48.3 62.8 48.3 62.8 L 55.1 60.1 C 55.1 60.1 59.8 54.5 63.8 52.8 C 67.7 51 69.7 53.7 69.7 53.7 L 78.3 50.5 L 79 47.5 L 79.1 46.8 C 79.1 46.8 81.2 44.3 81.7 41.1 C 76.5 34.8 69.4 31.1 61.9 30.1 Z " stroke-width="1"/>
<path id="ID0.9912767210043967" fill="none" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 58.5 87.6 L 60.5 81.7 "/>
<path id="ID0.6875613899901509" fill="none" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 61.9 30.1 C 61.4 30 60.9 30 60.4 29.9 C 58.1 30.5 55.5 31.4 52.9 32.7 C 36.2 40.6 27.3 53.3 28.4 66.3 C 29.4 78.6 44.3 82.9 45.1 83.1 L 49.3 90.5 L 54.2 99.1 L 56.9 91.7 L 59.4 85 C 59.4 85 63.9 83.7 67.7 81.2 C 69.1 80.3 71.5 78.3 72.6 77.3 L 75.4 76.8 L 83.8 77.9 L 85.4 78.1 L 84.7 76.5 L 80.9 67.5 C 80.9 67.5 83.1 60.1 82.8 56.4 C 82.2 50.3 79.6 46.7 79.6 46.7 C 79.6 46.7 81.3 44.4 82 41.4 C 81.9 41.2 81.7 41.1 81.6 40.9 C 76.5 34.8 69.4 31.1 61.9 30.1 Z "/>
</g>
<g id="Layer_5_7_">
<path id="ID0.20810980116948485" fill="#FFFFFF" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 81.1 57.6 C 80.8 52.4 77.9 48.4 74.7 48.6 C 71.5 48.8 69.1 53.1 69.4 58.3 C 69.7 63.5 72.6 67.5 75.8 67.3 C 79 67.1 81.4 62.8 81.1 57.6 Z "/>
<path id="ID0.7512365346774459" fill="#414142" d="M 78.8 54.8 C 78.4 53.8 77.4 53.3 76.5 53.7 C 75.6 54 75.2 55.1 75.5 56.1 C 75.9 57.1 76.9 57.6 77.8 57.2 C 78.8 56.8 79.2 55.8 78.8 54.8 " stroke-width="1"/>
</g>
<g id="Layer_7_7_">
<path id="ID0.584295348264277" fill="#FFFFFF" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 60.6 68.9 C 60.3 63.7 57 59.7 53.1 60 C 49.3 60.2 46.5 64.6 46.8 69.8 C 47.1 75 50.4 79 54.3 78.8 C 58 78.4 60.9 74 60.6 68.9 Z "/>
<path id="ID0.8320168349891901" fill="#414142" d="M 58 66 C 57.4 65.2 56.2 64.9 55.5 65.5 C 54.7 66.1 54.6 67.2 55.2 68.1 C 55.8 68.9 57 69.2 57.7 68.6 C 58.5 68 58.6 66.8 58 66 " stroke-width="1"/>
</g>
<path id="ID0.6457894956693053" fill="#5F4B43" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 63.5 54.4 C 65 53.6 67.6 53.2 66.7 51.5 C 66.2 50.8 63 49.1 61.4 50.1 C 59.7 51.2 58.4 55.3 59.4 56.5 C 60.4 57.7 62.2 55.1 63.5 54.4 Z "/>
<path id="ID0.5298887402750552" fill="#FFFFFF" stroke="#8E5322" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 48.7 46.7 C 45.3 50.7 45.2 55.3 45.2 55.3 C 45.2 55.3 40 53.8 41.6 49.4 C 43.5 43.7 48.7 46.7 48.7 46.7 Z "/>
</g>
<path id="ID0.053966973908245564" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 79.4 78.7 L 85.7 80.3 C 87.2 80.7 88.3 79.1 87.6 77.8 L 84.4 71.9 "/>
<path id="ID0.1555270254611969" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 39.7 35.9 C 25.9 46 22.9 65.4 33.1 79.2 C 37 84.5 42.2 88.2 48 90.2 L 52 98.9 C 53 101 55.9 101 56.8 98.9 L 60 91.8 C 65.7 91.5 71.4 89.5 76.3 85.9 C 90.1 75.8 93.1 56.4 82.9 42.6 C 72.8 28.8 53.5 25.8 39.7 35.9 Z "/>
<g id="ID0.5774397738277912">
<path id="ID0.7828251798637211" fill="#6D6E71" d="M 83.4 45.2 C 90.8 57.4 82.5 65.9 70.3 73.3 C 58.1 80.7 46.7 84.2 39.3 72 C 31.9 59.8 35.8 44 47.9 36.6 C 60 29.2 76 33.1 83.4 45.2 Z " stroke-width="1"/>
<path id="ID0.36082394095137715" fill="#A7A9AC" d="M 54.5 33.8 L 50.9 35.4 C 68.3 34.8 85.8 65.3 68.3 74.3 C 50.8 83.3 68.5 74.4 68.5 74.4 C 69.1 74.1 69.6 73.7 70.2 73.4 C 82.4 66 90.7 57.5 83.3 45.3 C 77.3 35.2 65.4 30.8 54.5 33.8 Z " stroke-width="1"/>
<path id="ID0.2866909154690802" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 83.4 45.2 C 90.8 57.4 82.5 65.9 70.3 73.3 C 58.1 80.7 46.7 84.2 39.3 72 C 31.9 59.8 35.8 44 47.9 36.6 C 60 29.2 76 33.1 83.4 45.2 Z "/>
</g>
<path id="ID0.12203236622735858" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M 81.5 55.7 C 81.5 55.7 79.6 63.1 69.1 67.7 "/>
<path id="ID0.4920350951142609" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M 65.1 69.6 L 63.6 70.3 "/>
<g id="ID0.2624542023986578">
<path id="ID0.1011484288610518" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 23.9 17.8 L 20.3 10.2 L 33.1 3.5 L 33.1 3.5 L 27.6 6.4 L 32.2 14.6 L 23.9 17.8 "/>
<path id="ID0.9947993699461222" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 30.5 11.3 C 30.5 11.3 36.5 8.7 33 3.5 L 27.5 6.4 L 30.5 11.3 Z "/>
<path id="ID0.910616482142359" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4000132602999924" stroke-linecap="round" stroke-linejoin="round" d="M 24.9641 11.2261 C 25.3675 10.8916 25.8691 10.7524 26.3535 10.7976 C 26.8379 10.8429 27.305 11.0726 27.6395 11.4759 C 27.974 11.8793 28.1132 12.3809 28.068 12.8653 C 28.0227 13.3497 27.793 13.8169 27.3896 14.1513 C 26.9863 14.4858 26.4847 14.625 26.0003 14.5798 C 25.5159 14.5345 25.0487 14.3048 24.7143 13.9015 C 24.3798 13.4981 24.2406 12.9965 24.2858 12.5121 C 24.331 12.0277 24.5607 11.5605 24.9641 11.2261 Z "/>
<path id="ID0.05219633784145117" fill="#D1D3D4" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 20.3 10.2 L 19.7 9.1 C 19.4 8.5 19.6 7.7 20.2 7.4 L 30.7 1.6 C 31.4 1.2 32.2 1.5 32.5 2.2 L 33.1 3.6 L 20.3 10.2 Z "/>
<path id="ID0.8260174826718867" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 21.3 6.5 L 21.9 7.5 "/>
<path id="ID0.48421383230015635" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 23.3 5.6 L 23.8 6.4 "/>
<path id="ID0.9640323268249631" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 25.5 4.5 L 26 5.4 "/>
<path id="ID0.8807248384691775" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 27.5 3.5 L 28 4.4 "/>
<path id="ID0.8796985191293061" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 29.5 2.4 L 30 3.4 "/>
</g>
<g id="ID0.357671526260674">
<path id="ID0.8794409851543605" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 20.5 24.4 L 13.9 18.9 L 4.1 29.8 L 4.1 29.8 L 8.4 25.2 L 15.2 31.8 L 20.5 24.4 "/>
<path id="ID0.8567405277863145" fill="#FFFFFF" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 12.4 29.3 C 12.4 29.3 8.3 34.6 4 29.8 L 8.3 25.2 L 12.4 29.3 Z "/>
<path id="ID0.5000843121670187" fill="#FFFFFF" stroke="#58595B" stroke-width="1.399987475238863" stroke-linecap="round" stroke-linejoin="round" d="M 13.847 23.8693 C 14.2716 23.5623 14.7813 23.4565 15.2616 23.5337 C 15.7419 23.6108 16.1929 23.8709 16.4999 24.2955 C 16.807 24.7201 16.9128 25.2298 16.8356 25.7101 C 16.7584 26.1905 16.4984 26.6414 16.0738 26.9485 C 15.6492 27.2555 15.1395 27.3613 14.6591 27.2841 C 14.1788 27.207 13.7279 26.9469 13.4208 26.5223 C 13.1137 26.0977 13.008 25.588 13.0851 25.1077 C 13.1623 24.6274 13.4224 24.1764 13.847 23.8693 Z "/>
<path id="ID0.5419647269882262" fill="#D1D3D4" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 13.9 18.9 L 12.9 18 C 12.4 17.5 11.6 17.5 11.1 18.1 L 2.7 27 C 2.2 27.6 2.2 28.5 2.9 28.9 L 4.1 29.8 L 13.9 18.9 Z "/>
<path id="ID0.2554870289750397" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 10 19 L 10.8 19.8 "/>
<path id="ID0.0665745297446847" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 8.6 20.7 L 9.3 21.4 "/>
<path id="ID0.7712228633463383" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 7 22.6 L 7.8 23.3 "/>
<path id="ID0.586033093277365" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 5.5 24.3 L 6.3 25 "/>
<path id="ID0.053929599933326244" fill="none" stroke="#58595B" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M 3.9 26 L 4.7 26.8 "/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB