Skip to content

Update the Spectacle logo #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 5, 2020
Merged

Update the Spectacle logo #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
520ca85
add new spectacle logo
Mar 4, 2020
5bea3f5
Replace LogoSVG
Mar 5, 2020
1f59695
improve svg styles
Mar 5, 2020
7386e3d
Refresh demos
Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/public/static/bg-demo.mp4
View file
Open in desktop
Binary file not shown.
Binary file modified docs/public/static/bg-demo.webm
View file
Open in desktop
Binary file not shown.
Binary file modified docs/public/static/bg-still.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/src/static/bg_hero_badge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
250 changes: 101 additions & 149 deletions src/components/logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,167 +1,119 @@
import * as React from 'react';
import propTypes from 'prop-types';
import styled from 'styled-components';

const LogoSVG = styled('svg')`
.spectacle-logo-st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #202020;
}
.spectacle-logo-st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #fc6986;
}
.spectacle-logo-st2 {
opacity: 0.4;
fill: none;
stroke: #fc6986;
stroke-width: 5.184;
enable-background: new;
}
.spectacle-logo-st3 {
opacity: 0.7;
fill: none;
stroke: #fc6986;
stroke-width: 5.184;
enable-background: new;
}
.spectacle-logo-st4 {
fill: none;
stroke: #fc6986;
stroke-width: 5.184;
}
.spectacle-logo-st5 {
enable-background: new;
}
.spectacle-logo-st6 {
fill: #fc6986;
}
.spectacle-logo-st7 {
fill: #1d1e1f;
}
enable-background: new 0 0 164 162;
`;

export default function SpectacleLogo(props) {
return (
<LogoSVG
x="0px"
y="0px"
<svg
xmlns="http://www.w3.org/2000/svg"
width={Math.floor(props.size * 1.012)}
height={props.size}
viewBox="0 0 164 162"
viewBox="0 0 601 595"
>
<path
className="spectacle-logo-st0"
d="M90.8,19l42.3,18.8c8.1,3.6,13.4,11.7,13.3,20.5v45.5c0,8.9-5.2,16.9-13.3,20.5l-42.3,18.8
c-5.8,2.6-12.4,2.6-18.2,0l-42.3-18.8c-8.1-3.6-13.4-11.7-13.3-20.5V58.3c0-8.9,5.2-16.9,13.3-20.5L72.6,19
C78.4,16.5,85,16.5,90.8,19z"
/>
<path
className="spectacle-logo-st1"
d="M20,110h123.6l-2.7,6.2l-59.2,27.2c-35.7-17-54.8-26.2-57.3-27.6C21.8,114.5,20.4,112.5,20,110z"
/>
<path
className="spectacle-logo-st2"
d="M81.7,29.1L35.5,49.6c-3.4,1.5-5.5,4.8-5.5,8.5v46c0,3.7,2.2,7,5.6,8.5l46.2,20.1l46.2-20.1
c3.4-1.5,5.6-4.8,5.6-8.5v-46c0-3.7-2.2-7-5.5-8.5L81.7,29.1z"
/>
<path
className="spectacle-logo-st3"
d="M81.7,23.5L33.5,44.7c-5.3,2.3-8.8,7.6-8.8,13.4V104c0,5.8,3.4,11.1,8.8,13.4l48.2,21.3l48.2-21.3
c5.3-2.3,8.8-7.6,8.8-13.4V58.2c0-5.8-3.4-11.1-8.8-13.4L81.7,23.5z"
/>
<path
className="spectacle-logo-st4"
d="M89.8,21.4c-5.1-2.3-11-2.3-16.1,0L31.4,40.2c-7.2,3.2-11.8,10.3-11.8,18.2v45.5c0,7.9,4.6,15,11.8,18.2
l42.3,18.8c5.1,2.3,11,2.3,16.1,0L132,122c7.2-3.2,11.8-10.3,11.8-18.2V58.3c0-7.9-4.6-15-11.8-18.2L89.8,21.4L89.8,21.4z"
/>
<g className="spectacle-logo-st5">
<path
className="spectacle-logo-st6"
d="M66.7,84h8.8v0.5c0,3.8,2.6,6.4,6.3,6.4c3.9,0,6-2.1,6-5.3c0-3.3-4.1-4.8-8.5-6.7c-5.6-2.4-12-5.4-12-13.5
c0-7.1,5.6-12.2,14-12.2c9,0,14.5,4.7,14.5,13.5h-8.4v-0.5c0-3.9-2.4-5.6-6-5.6c-3.4,0-5.6,1.9-5.6,4.5c0,3.4,4.2,5,8.9,7
c5.6,2.4,11.8,5.5,11.8,13.2C96.4,92,92,98.6,82,98.6C72.2,98.6,66.7,93.4,66.7,84z"
/>
</g>
<path
className="spectacle-logo-st1"
d="M81.9,18.9c10.4,4.5,15.5,7.2,15.2,8.1c-2,6.5-8,11.3-15.2,11.3c-7.2,0-13.2-4.7-15.2-11.2
C66.4,26.1,71.5,23.4,81.9,18.9z"
/>
<g className="spectacle-logo-st5">
<path
className="spectacle-logo-st7"
d="M49.8,121.2c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1c0.4,0.8,1,1.2,1.9,1.2c0.7,0,1.2-0.4,1.2-1.1
c0-0.8-0.5-1.1-1.8-1.4c-1.1-0.3-2.1-1-2.1-2.3c0-1.4,1-2.1,2.4-2.1c1.3,0,2,0.6,2.4,1.2c0,0.1,0.1,0.1,0.1,0.1s0,0.1-0.1,0.1
l-0.6,0.5c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.4-0.5-0.9-0.8-1.5-0.8c-0.7,0-1.2,0.4-1.2,1c0,0.6,0.6,1,1.6,1.3
c1.4,0.4,2.3,1,2.3,2.4c0,1.4-1.1,2.3-2.6,2.3c-1.4,0-2.5-0.7-2.9-1.7c0-0.1,0-0.1,0-0.1c0-0.1,0-0.1,0.1-0.2L49.8,121.2z"
/>
<path
className="spectacle-logo-st7"
d="M56.5,115.9c0-0.2,0.1-0.2,0.2-0.2h3c1.7,0,2.5,1,2.5,2.4c0,1.3-0.9,2.4-2.4,2.4h-2.1v2.9
c0,0.2-0.1,0.2-0.2,0.2h-0.8c-0.2,0-0.2-0.1-0.2-0.2V115.9z M59.6,119.3c0.9,0,1.4-0.6,1.4-1.3c0-0.7-0.4-1.3-1.4-1.3h-1.9v2.5
H59.6z"
/>
<path
className="spectacle-logo-st7"
d="M64.2,115.9c0-0.2,0.1-0.2,0.2-0.2h4.8c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.1-0.1,0.2-0.2,0.2h-3.8v2.1h3
c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.2-0.1,0.2-0.2,0.2h-3v2.5h3.9c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.2-0.1,0.2-0.2,0.2h-4.9
c-0.2,0-0.2-0.1-0.2-0.2V115.9z"
/>
<path
className="spectacle-logo-st7"
d="M77.6,122.2c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1-0.1,0.2c-0.8,0.7-1.6,1-2.8,1c-2,0-3.8-1.3-3.8-4
c0-2.7,1.8-4,3.9-4c1.1,0,2,0.4,2.6,0.9c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1-0.1,0.2l-0.4,0.6c-0.1,0.1-0.1,0.1-0.2,0.1
c0,0-0.1,0-0.1-0.1c-0.6-0.5-1.1-0.8-1.9-0.8c-1.3,0-2.6,0.9-2.6,2.9c0,2,1.2,2.9,2.5,2.9c0.9,0,1.4-0.3,2-0.9
c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1L77.6,122.2z"
/>
<path
className="spectacle-logo-st7"
d="M81.7,116.7h-2.2c-0.2,0-0.2-0.1-0.2-0.2v-0.7c0-0.2,0.1-0.2,0.2-0.2h5.6c0.2,0,0.2,0.1,0.2,0.2v0.7
c0,0.2-0.1,0.2-0.2,0.2h-2.2v6.5c0,0.2-0.1,0.2-0.2,0.2h-0.8c-0.2,0-0.2-0.1-0.2-0.2V116.7z"
/>
<path
className="spectacle-logo-st7"
d="M88.2,115.9c0.1-0.1,0.1-0.2,0.3-0.2h0.7c0.2,0,0.2,0.1,0.3,0.2l2.8,7.4c0,0.2-0.1,0.2-0.2,0.2h-0.8
c-0.2,0-0.2-0.1-0.3-0.2l-0.7-2h-2.8l-0.7,2c-0.1,0.1-0.1,0.2-0.3,0.2h-0.8c-0.2,0-0.2-0.1-0.2-0.2L88.2,115.9z M89.8,120.2l-1-2.7
l-1,2.7H89.8z"
/>
<g fill="none" fillRule="evenodd">
<path
className="spectacle-logo-st7"
d="M99.9,122.2c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1-0.1,0.2c-0.8,0.7-1.6,1-2.8,1c-2,0-3.8-1.3-3.8-4
c0-2.7,1.8-4,3.9-4c1.1,0,2,0.4,2.6,0.9c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1-0.1,0.2l-0.4,0.6c-0.1,0.1-0.1,0.1-0.2,0.1
c0,0-0.1,0-0.1-0.1c-0.6-0.5-1.1-0.8-1.9-0.8c-1.3,0-2.6,0.9-2.6,2.9c0,2,1.2,2.9,2.5,2.9c0.9,0,1.4-0.3,2-0.9
c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1L99.9,122.2z"
fill="#202020"
d="M342.277 19.4l195.971 87.165C575.801 123.268 600 160.515 600 201.616v211.961c0 41.1-24.199 78.348-61.752 95.051l-195.971 87.165a104.029 104.029 0 01-84.554 0L61.752 508.628C24.199 491.925 0 454.678 0 413.578V201.615c0-41.1 24.199-78.348 61.752-95.05L257.723 19.4a104.029 104.029 0 0184.554 0z"
transform="translate(.667 -10)"
/>
<path
className="spectacle-logo-st7"
d="M101.8,115.9c0-0.2,0.1-0.2,0.2-0.2h0.8c0.2,0,0.2,0.1,0.2,0.2v6.5h3.8c0.2,0,0.2,0.1,0.2,0.2v0.7
c0,0.2-0.1,0.2-0.2,0.2H102c-0.2,0-0.2-0.1-0.2-0.2V115.9z"
stroke="#FC6986"
strokeWidth="24.247"
d="M332.269 53.303a79.877 79.877 0 00-64.741 0L76.38 138.036c-24.842 11.012-40.858 35.632-40.858 62.805v213.702c0 27.174 16.016 51.793 40.858 62.805l191.148 84.734a79.877 79.877 0 0064.74 0l191.148-84.734c24.842-11.012 40.859-35.631 40.859-62.805V200.841c0-27.173-16.017-51.793-40.859-62.805L332.27 53.303z"
opacity=".499"
transform="translate(.667 -10)"
/>
<path
className="spectacle-logo-st7"
d="M108.9,115.9c0-0.2,0.1-0.2,0.2-0.2h4.8c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.1-0.1,0.2-0.2,0.2h-3.8v2.1h3
c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.2-0.1,0.2-0.2,0.2h-3v2.5h3.9c0.2,0,0.2,0.1,0.2,0.2v0.7c0,0.2-0.1,0.2-0.2,0.2h-4.9
c-0.2,0-0.2-0.1-0.2-0.2V115.9z"
stroke="#FC6986"
strokeWidth="24.007"
d="M337.399 30.368a92.026 92.026 0 00-74.798 0l-195.97 87.165c-33.221 14.775-54.628 47.725-54.628 84.083v211.961c0 36.358 21.407 69.308 54.627 84.084l195.971 87.164a92.026 92.026 0 0074.798 0l195.97-87.164c33.221-14.776 54.628-47.726 54.628-84.084v-211.96c0-36.359-21.407-69.309-54.627-84.084L337.399 30.368z"
transform="translate(.667 -10)"
/>
<g>
<path
fill="#F14E74"
d="M157.997 216.514L50.114 111.686C36.908 98.854 38.448 77.149 53.33 66.33c14.884-10.82 35.883-5.501 43.882 11.116l65.348 135.75c1.392 2.891-2.266 5.55-4.564 3.318"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FC6986"
d="M162.555 213.17L97.09 77.479c-8.014-16.61.855-36.461 18.533-41.483 17.677-5.023 35.578 7.223 37.407 25.59l14.947 150.046c.318 3.196-4.027 4.43-5.422 1.54"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#E13E65"
d="M154.775 221.155l-137.206-61.1c-16.795-7.48-22.786-28.39-12.52-43.697 10.267-15.307 31.805-17.577 45.008-4.743L157.924 216.46c2.297 2.233-.226 5.996-3.149 4.694"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FC6986"
d="M4.005 118.137c.736-1.507 6.489-12.257 22.256-14.9 7.154-1.198 17.406 1.147 25.97 10.593l99.313 96.342.715 4.147-97.933-76.994s-15.567-12.2-33.372-.767l-.043-.046a12.583 12.583 0 01-6.663 1.913c-7.015 0-12.702-5.715-12.702-12.763 0-2.818.92-5.413 2.46-7.525"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FF92AC"
d="M51.446 67.702c1.203-1.166 10.262-9.297 25.98-6.375 7.131 1.326 15.971 7.047 20.814 18.862l60.587 125.147-.736 4.144L92.23 102.992S81.739 86.186 61.12 90.828l-.025-.058a12.569 12.569 0 01-6.913-.486c-6.594-2.406-9.998-9.727-7.605-16.352a12.68 12.68 0 014.868-6.23M113.547 36.788c1.529-.678 12.82-5.18 26.577 3.002 6.24 3.71 12.58 12.138 13.08 24.907l14.01 138.455-2.11 3.635-25.356-122.76s-4.091-19.407-25.04-22.18l-.004-.062a12.587 12.587 0 01-6.323-2.85c-5.367-4.538-6.055-12.589-1.539-17.981a12.619 12.619 0 016.705-4.166"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FF92AC"
d="M151.276 53.953l-1.021 133.213s4.055 29.884 9.105 36.032l-23.665-10.511c-8.94-7.605-6.593-24.569-6.593-24.569l22.174-134.165z"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#E13E65"
d="M168.916 224.707c-17.639 0-31.938-14.367-31.938-32.09L155.552 12.77c.711-6.88 6.48-12.106 13.364-12.106 6.883 0 12.653 5.226 13.364 12.106l18.574 179.847c0 17.723-14.3 32.09-31.938 32.09"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FF92AC"
d="M159.625 31.361L168.931 47.845 178.285 31.572"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FC6986"
d="M182.264 14.076c0 7.407-2.816 24.036-13.348 24.036-10.091 0-13.349-16.629-13.349-24.036S161.544.664 168.916.664s13.348 6.005 13.348 13.412M222.789 35.994c-15.437-4.386-31.043 4.398-35.97 18.926l16.575 101.17 37.927-78.611c8.013-16.61-.855-36.463-18.532-41.485M169.523 201.453c-1.096-.137-17.918-2.58-17.507-22.395l3.589-89.137a114.848 114.848 0 00-4.317-36.15l-14.32 138.864a7.42 7.42 0 00.074 2.034c.37 5.013 2.534 18.102 14.922 25.297 4.188 2.432 9.659 4.675 16.396 4.732l.001-.026c.107.003.21.016.318.016 6.397 0 11.583-5.21 11.583-11.64 0-6.14-4.737-11.16-10.74-11.595"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FF92AC"
d="M140.853 89.343s2.258 13.802-.282 29.306l2.54-7.94 2.446-18.908-4.704-2.458zM231.569 40.954a12.619 12.619 0 00-6.705-4.166c-1.528-.678-12.82-5.18-26.577 3.001-4.512 2.684-9.065 7.847-11.436 15.322l7.867 48.02 3.945-19.104s4.091-19.406 25.04-22.18l.004-.062a12.592 12.592 0 006.323-2.849c5.368-4.539 6.056-12.59 1.539-17.982"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#F14E74"
d="M285.08 66.33c-14.883-10.82-35.883-5.5-43.881 11.116l-37.818 78.56 5.327 32.518s.024.156.058.44l79.532-77.278c13.206-12.832 11.665-34.537-3.218-45.356"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FF92AC"
d="M291.833 73.932a12.685 12.685 0 00-4.867-6.23c-1.204-1.166-10.262-9.298-25.981-6.374-7.131 1.325-15.971 7.045-20.813 18.86l-36.77 75.95 2.076 12.667 40.704-65.812s10.49-16.807 31.108-12.165l.025-.058c2.232.468 4.613.353 6.913-.487 6.595-2.405 10-9.726 7.605-16.351"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#E13E65"
d="M333.362 116.358c-10.267-15.307-31.805-17.577-45.008-4.743l-79.587 77.358c.325 2.7 1.61 16.966-6.418 23.849l118.493-52.767c16.795-7.48 22.786-28.39 12.52-43.697"
transform="translate(.667 -10) translate(130 145)"
/>
<path
fill="#FC6986"
d="M334.406 118.137c-.735-1.507-6.488-12.257-22.256-14.9-7.154-1.199-17.406 1.147-25.97 10.593l-77.415 75.128c.128 1.057.407 3.946.2 7.476l75.12-59.109s15.567-12.201 33.372-.767l.043-.046a12.58 12.58 0 006.664 1.913c7.015 0 12.702-5.715 12.702-12.763 0-2.818-.92-5.413-2.46-7.525"
transform="translate(.667 -10) translate(130 145)"
/>
</g>
<text
fill="#FC6986"
fontFamily="Castledown-Bold, Castledown"
fontSize="52.014"
fontWeight="bold"
letterSpacing="3.853"
transform="translate(.667 -10)"
>
<tspan x="143" y="472">
SPECTACLE
</tspan>
</text>
</g>
<path
className="spectacle-logo-st0"
d="M80.6,25c0.1-0.8,0.6-1.3,1.2-1.3s1.1,0.5,1.2,1.3l0.3,2.3l0.7-3.3c0-1.2-1-2.1-2.2-2.1h0
c-1.2,0-2.2,0.9-2.2,2.1l0.7,3.2C80.3,27.1,80.6,25,80.6,25z M80,29.4l-1-4.9c-0.4-1-1.7-1.5-2.7-1c-1.1,0.5-1.6,1.7-1.2,2.7
l4.5,6.5C79.6,32.6,80,29.4,80,29.4z M79.6,33.7L79.6,33.7L79.6,33.7l0-0.1l-5.1-6.9c-0.8-0.7-2.1-0.6-2.9,0.3
c-0.8,0.8-0.8,2.1,0,2.8l8,4.4C79.6,33.9,79.6,33.8,79.6,33.7 M92,26.9c-0.8-0.8-2.1-1-2.8-0.3l-5.1,7v0c0,0.2,0,0.3-0.1,0.5l8-4.4
C92.8,29,92.8,27.7,92,26.9 M87.3,23.5c-1.1-0.5-2.3,0-2.7,1l-1,5.1l0.4,3l4.5-6.5C88.9,25.1,88.4,23.9,87.3,23.5"
/>
<path
className="spectacle-logo-st0"
d="M81.2,25.1l-1.1,8.6c0,0.8,0.7,1.5,1.6,1.5c0.9,0,1.6-0.7,1.6-1.5l-1.1-8.6c0-0.3-0.2-0.7-0.5-0.7
C81.4,24.4,81.3,24.7,81.2,25.1"
/>
</LogoSVG>
</svg>
);
}

Expand Down