Beginnings of message section and fixing some subnav behavior

This commit is contained in:
Karishma Chadha 2020-09-24 10:20:13 -04:00
parent 39ec707cb7
commit a1b77639de
8 changed files with 332 additions and 2 deletions

View file

@ -88,6 +88,7 @@ class AnnualReport extends React.Component {
// correct section
return () => {
this.scrollTo(this.sectionRefs[sectionName]);
this.setState({dropdownVisible: false});
};
}
@ -235,7 +236,7 @@ class AnnualReport extends React.Component {
onClick={this.handleDropDownClick}
>
<img
className={classNames({rotated: this.state.subNavVisible})}
className={classNames({rotated: this.state.dropdownVisible})}
src="/images/annual-report/dropdown-arrow.svg"
/>
</Button>
@ -254,6 +255,64 @@ class AnnualReport extends React.Component {
{subnav}
</MediaQuery>
</div>
<div
className="message-section section"
ref={this.setRef(SECTIONS.message)}
>
<FlexRow className="masthead">
<div className="masthead-content">
<p className="message-year">
<FormattedMessage id="annualReport.mastheadYear" />
</p>
<h1>
<FormattedMessage id="annualReport.mastheadTitle" />
</h1>
</div>
<img src="/images/annual-report/message/hero-image.svg" />
</FlexRow>
<MediaQuery minWidth={frameless.desktop}>
<img src="/images/annual-report/message/wave-icon.svg" />
</MediaQuery>
<div className="inner">
<FlexRow className="message-content">
<MediaQuery maxWidth={frameless.desktop - 1}>
{/* Show the wave icon inside this div in smaller screens */}
<div className="wave-icon-and-title">
<img src="/images/annual-report/message/wave-icon.svg" />
<h2>
<FormattedMessage id="annualReport.messageTitle" />
</h2>
</div>
</MediaQuery>
<MediaQuery minWidth={frameless.desktop}>
<h2>
<FormattedMessage id="annualReport.messageTitle" />
</h2>
</MediaQuery>
<div className="message-from-team">
<p>
<FormattedMessage id="annualReport.messageP1" />
</p>
<p>
<FormattedMessage id="annualReport.messageP2" />
</p>
<p>
<FormattedMessage id="annualReport.messageP3" />
</p>
<p>
<FormattedMessage id="annualReport.messageP4" />
</p>
<p>
<FormattedMessage id="annualReport.messageP5" />
</p>
<p className="message-signature">
<FormattedMessage id="annualReport.messageSignature" />
</p>
<img src="/images/annual-report/message/team-photo.svg" />
</div>
</FlexRow>
</div>
</div>
<div
className="mission section"
id="mission"

View file

@ -12,6 +12,11 @@ $base-bg: $ui-white;
// font-family: "Helvetica Neue";
// }
h1 {
font-size: 5rem;
line-height: 6.125rem;
}
h2 {
font-size: 3.25rem;
line-height: 4rem;
@ -176,6 +181,67 @@ p {
margin-bottom: 0;
}
.message-section {
background-color: $ui-blue;
padding: 0 56px;
h1, h2, p {
color: $ui-white;
}
@media #{$intermediate-and-smaller} {
.inner {
width: 100%;
}
}
}
.masthead {
p {
font-size: 1.25rem;
line-height: 2rem;
font-weight: bold;
}
.masthead-content {
width: 440px;
text-align: left;
}
}
.message-content{
align-items: flex-start;
@media #{$big} {
h2 {
width: 300px;
}
}
@media #{$intermediate-and-smaller} {
text-align: left;
h2 {
width: 480px;
vertical-align: middle;
}
}
.wave-icon-and-title {
display: flex;
justify-content: center;
}
.message-from-team {
width: 620px;
}
img {
margin: 8px 24px 8px 0px;
vertical-align: middle;
}
}
.milestones-section {
background-color: $ui-blue-10percent;
@ -926,6 +992,10 @@ img.tips-icon {
white-space: nowrap;
color: $type-white;
font-size: .85rem;
&.selectedItem, &:hover {
border-bottom: 1px solid $ui-white;
}
}
.sectionIndicator {
@ -980,7 +1050,7 @@ img.tips-icon {
border: 1px solid $box-shadow-light-gray;
border-radius: 4px;
&.selectedItem {
&.selectedItem, &:hover {
border-bottom: 1px solid $box-shadow-light-gray;
background-color: $box-shadow-light-gray;
}

View file

@ -62,6 +62,16 @@
"annualReport.subnavLeadership": "Leadership",
"annualReport.subnavDonate": "Donate",
"annualReport.mastheadYear": "2019 Annual Report",
"annualReport.mastheadTitle": "Cultivating a World of Creative Learning",
"annualReport.messageTitle": "Message from the Scratch Team",
"annualReport.messageP1": "2019 was a year of great progress for Scratch. We started the year with the launch of Scratch 3.0, our newest generation of Scratch, designed to spark childrens creativity and engage a broad diversity of children. We celebrated the end of the year with our team moving from MIT into its new home at the Scratch Foundation, in a playful ground-floor space near South Station in Boston. Throughout the year, the Scratch community continued to thrive and grow: More than 20 million young people created projects with Scratch in 2019, an increase of 48% over the year before.",
"annualReport.messageP2": "During the past few months, the impact and importance of Scratch have been clearer than ever. As the pandemic forced schools to close, the Scratch online community became busier than ever, with twice as much activity as last year. Confined to their homes, young people have come to Scratch to express themselves creatively and connect with one another. Scratchers have also been actively engaged in the growing movements for racial justice and equity, creating animated projects and studios to spread awareness and demand change.",
"annualReport.messageP3": "From the time we launched Scratch in 2007, we have always seen Scratch as more than a programming language. Scratch provides opportunities for young people to develop their voices, express their ideas, and collaborate with one another. It has been heartening to see how Scratchers have responded to recent societal challenges with creativity, collaboration, caring, and kindness.",
"annualReport.messageP4": "In this Annual Report, well share more about the mission, plans, impact, and reach of Scratch, supported with examples of how Scratch is expanding learning opportunities for a broad diversity of young people around the world, both in schools and throughout their lives.",
"annualReport.messageP5": "Were proud of what young people are creating and learning with Scratch today, and were committed to providing more opportunities for more young people in the future.",
"annualReport.messageSignature": "— The Scratch Team",
"annualReport.milestonesTitle": "Milestones",
"annualReport.milestonesDescription": "Here are some key events and accomplishments in the history of Scratch and the global Scratch community.",
"annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch",

View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="220px" height="272px" viewBox="0 0 220 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Banana</title>
<defs>
<polygon id="path-1" points="0 0.6377 12.8187035 0.6377 12.8187035 28.9997 0 28.9997"></polygon>
<polygon id="path-3" points="0.141209725 0.633 17.4971 0.633 17.4971 28.3349774 0.141209725 28.3349774"></polygon>
<polygon id="path-5" points="0.419655666 0.8036 13.417 0.8036 13.417 29.9996 0.419655666 29.9996"></polygon>
</defs>
<g id="Banana" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(10.000000, 20.000000)">
<g id="Group-6" transform="translate(82.500000, 137.000000) rotate(-180.000000) translate(-82.500000, -137.000000) translate(76.000000, 122.000000)">
<path d="M11.2877,28.5969 C11.1247,28.5969 10.9607,28.5449 10.8237,28.4409 L8.0317,26.3179 C7.7787,26.1259 7.5877,25.8519 7.4937,25.5459 L0.8347,3.7459 C0.6907,3.2759 0.7757,2.7819 1.0667,2.3889 C1.3557,1.9989 1.8157,1.7659 2.2957,1.7659 C2.4697,1.7659 2.6417,1.7949 2.8077,1.8539 L5.5557,2.8169 C6.0397,2.9859 6.4047,3.3829 6.5327,3.8809 C6.6597,4.3779 6.5317,4.9029 6.1877,5.2849 L4.7717,6.8649 L7.9907,17.4019 L8.8137,18.1619 C9.2187,18.5359 9.3917,19.1029 9.2647,19.6389 L9.0617,20.4959 L9.7097,21.0959 C10.1137,21.4689 10.2867,22.0349 10.1597,22.5709 L9.9577,23.4289 L10.7787,24.1889 C10.9787,24.3709 11.1287,24.6109 11.2077,24.8759 L12.0217,27.6129 C12.1157,27.9309 11.9957,28.2729 11.7237,28.4609 C11.5927,28.5519 11.4397,28.5969 11.2877,28.5969" id="Fill-1" fill="#DBDCDD"></path>
<g id="Group-5" transform="translate(0.000000, 0.362500)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-4"></g>
<path d="M2.2964,0.6377 L2.2964,0.6377 C1.5734,0.6377 0.8844,0.9867 0.4504,1.5717 C0.0144,2.1607 -0.1126,2.9037 0.1024,3.6077 L6.7614,25.4077 C6.9024,25.8717 7.1824,26.2727 7.5684,26.5657 L10.3594,28.6877 C10.6334,28.8957 10.9604,28.9997 11.2874,28.9997 C11.5914,28.9997 11.8964,28.9097 12.1584,28.7287 C12.7034,28.3517 12.9434,27.6667 12.7554,27.0317 L11.9414,24.2937 C11.8234,23.9007 11.6024,23.5437 11.2994,23.2637 L10.8064,22.8077 L10.9054,22.3837 C11.0954,21.5797 10.8364,20.7317 10.2304,20.1707 L9.9104,19.8747 L10.0104,19.4517 C10.1994,18.6487 9.9414,17.7997 9.3344,17.2387 L8.6624,16.6177 L5.6304,6.6917 L6.7594,5.4327 C7.2734,4.8597 7.4654,4.0727 7.2744,3.3267 C7.0824,2.5817 6.5344,1.9857 5.8084,1.7307 L3.0594,0.7677 C2.8124,0.6817 2.5554,0.6377 2.2964,0.6377 M2.2964,2.1687 C2.3794,2.1687 2.4664,2.1827 2.5534,2.2137 L5.3024,3.1767 C5.8174,3.3567 5.9844,4.0037 5.6184,4.4097 L4.2014,5.9917 C4.0234,6.1907 3.9614,6.4697 4.0394,6.7257 L7.2584,17.2627 C7.2984,17.3927 7.3714,17.5097 7.4714,17.6017 L8.2934,18.3627 C8.4964,18.5497 8.5824,18.8317 8.5194,19.1007 L8.3174,19.9577 C8.2534,20.2267 8.3404,20.5087 8.5424,20.6967 L9.1904,21.2947 C9.3924,21.4827 9.4784,21.7637 9.4144,22.0327 L9.2124,22.8907 C9.1494,23.1587 9.2354,23.4407 9.4384,23.6277 L10.2584,24.3877 C10.3594,24.4807 10.4344,24.5997 10.4734,24.7317 L11.2874,27.4687 L8.4954,25.3457 C8.3674,25.2487 8.2734,25.1137 8.2264,24.9597 L1.5674,3.1597 C1.4104,2.6477 1.8084,2.1687 2.2964,2.1687" id="Fill-3" fill="#DBDCDD" mask="url(#mask-2)"></path>
</g>
</g>
<g id="Group-16">
<path d="M7.3887,91.2772 C7.3887,91.2772 3.1637,97.0152 3.3667,100.5412 C3.3667,100.5412 1.3267,98.7772 0.4067,97.1512 C-0.8293,94.9682 0.9177,91.6602 3.4347,91.2762 C5.2817,90.9942 7.3887,91.2772 7.3887,91.2772" id="Fill-1" fill="#575E75"></path>
<path d="M3.1797,95.0574 C8.3387,79.7894 63.6557,110.8384 106.8897,76.5324 C129.5787,58.5274 137.1837,41.7524 136.4437,27.2784 C136.4187,26.8014 136.2657,26.3424 136.0117,25.9404 L127.0787,11.7914 C125.0587,8.5914 126.4327,4.3424 129.9447,2.9314 L133.6487,1.4434 C137.5777,-0.1366 141.8747,2.6984 141.9687,6.9334 L142.3517,24.1814 C142.3697,25.0444 142.7957,25.8334 143.4967,26.3384 C146.4247,28.4494 154.8237,35.1804 157.5087,49.3514 C161.5477,70.6684 150.5767,119.7004 95.7657,131.9144 C43.9087,143.4714 -2.3153,111.3204 3.1797,95.0574" id="Fill-3" fill="#FFBF00"></path>
<g id="Group-7" transform="translate(126.000000, 0.367000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-6"></g>
<path d="M17.4971,25.9717 C16.7961,25.4667 16.3701,24.6777 16.3511,23.8147 L15.9691,6.5667 C15.8751,2.3307 11.5781,-0.5043 7.6481,1.0757 L3.9441,2.5647 C0.4331,3.9757 -0.9409,8.2247 1.0791,11.4247 L10.0121,25.5737 C10.2661,25.9757 10.4191,26.4347 10.4431,26.9107 C10.4431,26.9107 12.0631,28.7797 14.3921,28.2357 C16.7191,27.6907 17.4971,25.9717 17.4971,25.9717" id="Fill-5" fill="#E6AC00" mask="url(#mask-4)"></path>
</g>
<path d="M95.7519,131.908 C46.2969,142.925 2.0169,114.225 2.7619,97.43 C19.5589,109.734 49.6409,119.474 81.9189,112.272 C136.7309,100.052 147.6849,51.026 143.6399,29.708 C140.9749,15.529 133.6489,1.456 133.6489,1.456 C137.5669,-0.134 141.8789,2.686 141.9769,6.926 L142.3389,24.19 C142.3809,25.031 142.7849,25.841 143.5019,26.345 C146.4319,28.435 154.8369,35.191 157.4999,49.341 C161.5449,70.66 150.5629,119.688 95.7519,131.908" id="Fill-8" fill="#E6AC00"></path>
<path d="M129.2217,68.2322 C124.2117,73.9872 124.6777,78.7302 129.1977,79.2962 C133.7167,79.8642 140.9847,76.6722 142.6227,70.8872 C144.2617,65.1022 134.8837,61.7272 129.2217,68.2322" id="Fill-10" fill="#CC9900"></path>
<path d="M128.6318,85.9979 C125.3388,87.9739 126.7358,93.9229 130.6378,94.1289 C134.5378,94.3359 136.8918,90.7859 136.6308,87.6309 C136.3688,84.4749 133.7538,82.9259 128.6318,85.9979" id="Fill-12" fill="#CC9900"></path>
<path d="M123.833,84.1737 C125.66,79.6537 119.609,74.3637 115.467,77.0147 C111.323,79.6637 111.679,85.1647 114.398,88.3237 C117.118,91.4837 120.991,91.2037 123.833,84.1737" id="Fill-14" fill="#CC9900"></path>
</g>
<g id="Group-12" transform="translate(142.967923, 176.724963) rotate(-177.000000) translate(-142.967923, -176.724963) translate(65.967923, 126.224963)">
<path d="M129.441333,40.3033 C129.441333,40.3033 122.418555,8.69885598 80.7345365,1.04963345 C39.0505182,-6.59958908 0.350105746,31.3352443 0.350105746,31.3352443" id="Stroke-1" stroke="#FF661A" stroke-width="4.595" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M150.704,99.7213 C150.373,99.7173 150.082,99.5003 149.983,99.1843 L149.13,96.4583 C149.047,96.1953 149.037,95.9133 149.101,95.6463 L149.356,94.5623 L148.709,93.9623 C148.305,93.5893 148.132,93.0243 148.259,92.4873 L148.461,91.6293 L147.814,91.0323 C147.409,90.6583 147.236,90.0913 147.363,89.5553 L147.62,88.4643 L144.401,77.9273 L142.343,77.4083 C141.846,77.2833 141.446,76.9183 141.274,76.4353 C141.102,75.9523 141.183,75.4183 141.489,75.0073 L143.231,72.6723 C143.523,72.2813 143.97,72.0563 144.456,72.0563 C145.137,72.0563 145.726,72.4923 145.924,73.1423 L152.583,94.9413 C152.678,95.2503 152.673,95.5753 152.569,95.8813 L151.438,99.2023 C151.333,99.5133 151.041,99.7213 150.714,99.7213 L150.704,99.7213 Z" id="Fill-3" fill="#DBDCDD"></path>
<g id="Group-7" transform="translate(140.000000, 70.487000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="Clip-6"></g>
<path d="M4.456,0.8036 C3.726,0.8036 3.056,1.1406 2.618,1.7276 L0.876,4.0626 C0.416,4.6786 0.295,5.4806 0.553,6.2046 C0.81,6.9306 1.409,7.4756 2.156,7.6636 L3.795,8.0766 L6.827,18.0026 L6.617,18.8926 C6.428,19.6976 6.686,20.5456 7.294,21.1066 L7.613,21.4016 L7.513,21.8246 C7.323,22.6286 7.583,23.4776 8.189,24.0386 L8.509,24.3336 L8.354,24.9876 C8.26,25.3886 8.275,25.8086 8.398,26.2016 L9.253,28.9266 C9.45,29.5586 10.033,29.9916 10.695,29.9996 L10.714,29.9996 C11.369,29.9996 11.953,29.5826 12.164,28.9616 L13.294,25.6416 C13.45,25.1826 13.458,24.6956 13.316,24.2306 L6.657,2.4306 C6.359,1.4566 5.476,0.8036 4.456,0.8036 M4.456,2.3356 C4.772,2.3356 5.085,2.5286 5.192,2.8776 L11.851,24.6776 C11.897,24.8306 11.895,24.9956 11.844,25.1486 L10.714,28.4686 L9.86,25.7426 C9.819,25.6126 9.813,25.4726 9.846,25.3386 L10.102,24.2496 C10.165,23.9816 10.079,23.6996 9.876,23.5126 L9.229,22.9136 C9.026,22.7266 8.94,22.4456 9.004,22.1756 L9.206,21.3186 C9.269,21.0496 9.184,20.7676 8.98,20.5796 L8.334,19.9826 C8.131,19.7946 8.045,19.5126 8.108,19.2436 L8.365,18.1536 C8.396,18.0216 8.393,17.8836 8.352,17.7536 L5.134,7.2166 C5.056,6.9596 4.849,6.7636 4.589,6.6976 L2.53,6.1786 C2.001,6.0446 1.777,5.4156 2.103,4.9786 L3.846,2.6436 C4.002,2.4336 4.23,2.3356 4.456,2.3356" id="Fill-5" fill="#DBDCDD" mask="url(#mask-6)"></path>
</g>
<path d="M124.3651,35.7808 L131.1221,33.7178 C132.5531,33.2798 134.0901,33.9408 134.7581,35.2788 L134.8851,35.5348 C139.5131,44.8088 144.2331,54.2598 146.0091,64.4718 L147.3311,72.0718 C147.4631,72.8338 147.0081,73.5738 146.2691,73.7998 L134.2051,77.4848 C133.4661,77.7108 132.6751,77.3508 132.3591,76.6458 L129.2121,69.6138 C124.9731,60.1468 123.6031,49.6658 122.2581,39.3808 L122.2221,39.1078 C122.0281,37.6248 122.9341,36.2178 124.3651,35.7808" id="Fill-8" stroke="#FF661A" stroke-width="2" fill="#FF661A"></path>
</g>
</g>
</g>
</svg>

After

(image error) Size: 9.5 KiB

View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Blocks</title>
<defs>
<filter id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.054902 0 0 0 0 0.741176 0 0 0 0 0.549020 0 0 0 1.000000 0"></feColorMatrix>
</filter>
<filter id="filter-2">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.600000 0 0 0 0 0.400000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="Blocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(106.000000, 101.500000) rotate(-10.000000) translate(-106.000000, -101.500000) translate(22.000000, 45.000000)"></g>
<g id="Group" transform="translate(17.051027, 45.432979)" stroke-linecap="round" stroke-linejoin="round">
<g filter="url(#filter-1)" id="Vertical/Block/Command">
<g transform="translate(84.000000, 28.000000) rotate(-10.000000) translate(-84.000000, -28.000000) ">
<path d="M14.3431458,0 C15.4040117,0 16.4214274,0.421427361 17.1715729,1.17157288 L17.1715729,1.17157288 L22.8284271,6.82842712 C23.5785726,7.57857264 24.5959883,8 25.6568542,8 L25.6568542,8 L38.3431458,8 C39.4040117,8 40.4214274,7.57857264 41.1715729,6.82842712 L41.1715729,6.82842712 L46.8284271,1.17157288 C47.5785726,0.421427361 48.5959883,0 49.6568542,0 L49.6568542,0 L164,0 C166.209139,-4.05812251e-16 168,1.790861 168,4 L168,44 C168,46.209139 166.209139,48 164,48 L49.6568542,48 C48.5959883,48 47.5785726,48.4214274 46.8284271,49.1715729 L41.1715729,54.8284271 C40.4214274,55.5785726 39.4040117,56 38.3431458,56 L25.6568542,56 C24.5959883,56 23.5785726,55.5785726 22.8284271,54.8284271 L17.1715729,49.1715729 C16.4214274,48.4214274 15.4040117,48 14.3431458,48 L4,48 C1.790861,48 2.705415e-16,46.209139 0,44 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="Command" stroke="#0A8E69" fill="#0EBD8C"></path>
</g>
</g>
</g>
<g id="Group" transform="translate(28.235776, 105.205800)" stroke-linecap="round" stroke-linejoin="round">
<g filter="url(#filter-2)" id="Vertical/Block/Command-Copy">
<g transform="translate(60.000000, 28.000000) rotate(-10.000000) translate(-60.000000, -28.000000) ">
<path d="M14.3431458,0 C15.4040117,0 16.4214274,0.421427361 17.1715729,1.17157288 L17.1715729,1.17157288 L22.8284271,6.82842712 C23.5785726,7.57857264 24.5959883,8 25.6568542,8 L25.6568542,8 L38.3431458,8 C39.4040117,8 40.4214274,7.57857264 41.1715729,6.82842712 L41.1715729,6.82842712 L46.8284271,1.17157288 C47.5785726,0.421427361 48.5959883,0 49.6568542,0 L49.6568542,0 L116,0 C118.209139,-4.05812251e-16 120,1.790861 120,4 L120,44 C120,46.209139 118.209139,48 116,48 L49.6568542,48 C48.5959883,48 47.5785726,48.4214274 46.8284271,49.1715729 L41.1715729,54.8284271 C40.4214274,55.5785726 39.4040117,56 38.3431458,56 L25.6568542,56 C24.5959883,56 23.5785726,55.5785726 22.8284271,54.8284271 L17.1715729,49.1715729 C16.4214274,48.4214274 15.4040117,48 14.3431458,48 L4,48 C1.790861,48 2.705415e-16,46.209139 0,44 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="Command" stroke="#0A8E69" fill="#0EBD8C"></path>
</g>
</g>
</g>
</g>
</svg>

After

(image error) Size: 3.4 KiB

File diff suppressed because one or more lines are too long

After

(image error) Size: 6.4 MiB

File diff suppressed because one or more lines are too long

After

(image error) Size: 2.3 MiB

View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Wave Icon</title>
<g id="Wave-Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(9.000000, 20.000000)">
<path d="M1.2801,39.1114 C-5.1539,29.5324 14.2311,26.3004 24.7121,45.0704 C30.7031,55.7994 38.2491,46.5614 41.3461,38.5934 C45.4221,28.1064 51.9561,14.6224 55.7181,6.4474 C59.9671,-2.7836 71.5841,3.2524 68.0281,11.5824 C63.1871,22.9204 53.0271,41.1774 56.0351,42.9864 C59.2781,44.9374 69.5051,19.7384 78.0751,5.7304 C84.3211,-4.4806 94.4431,1.2634 89.9201,12.4164 C84.5051,25.7694 71.5821,43.7754 73.7541,45.5124 C75.9401,47.2594 86.9551,29.8414 93.5261,19.1894 C98.8791,10.5134 108.9061,17.5134 104.0351,25.4394 C96.7011,37.3714 81.2301,55.9924 83.1791,57.6674 C85.7421,59.8684 94.2381,47.4524 99.2821,41.2524 C105.3881,33.7454 112.8721,40.5874 108.1941,47.0234 C99.9481,58.3674 78.8801,85.0764 72.8721,92.4004 C58.6951,109.6784 16.8891,96.4154 16.8961,67.6084 C16.9011,52.1914 4.9401,44.5634 1.2801,39.1114 Z" id="Hand" fill="#ECC293"></path>
<path d="M30.0269,9.0771 L30.0269,9.0771 C26.2459,11.6791 24.1809,16.1321 24.6379,20.6981" id="Stroke-4" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M22.7847,-0.0005 L22.7847,-0.0005 C15.9407,4.7085 12.2037,12.7695 13.0307,21.0355" id="Stroke-6" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M101.7779,82.436 L101.7779,82.436 C106.1819,80.797 109.3439,76.891 110.0309,72.243" id="Stroke-8" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M106.7017,93.2583 L106.7017,93.2583 C114.6737,90.2913 120.3977,83.2203 121.6397,74.8063" id="Stroke-10" stroke="#FEFEFE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>

After

(image error) Size: 2 KiB