105 lines
8.4 KiB
JavaScript
105 lines
8.4 KiB
JavaScript
|
|
import Layout from '../components/MyLayout.js'
|
|
import { withStyles } from '@material-ui/core/styles'
|
|
import { Spring, animated } from 'react-spring'
|
|
import { interpolate, interpolateAll, separate } from 'flubber'
|
|
import { GradientPinkRed as Gradient } from '@vx/gradient'
|
|
import { Text } from '@vx/text';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
position: 'relative',
|
|
},
|
|
});
|
|
|
|
// 'bin2': 'M192 1024h640l64-704h-768zM640 128v-128h-256v128h-320v192l64-64h768l64 64v-192h-320zM576 128h-128v-64h128v64z',
|
|
// 'bold': 'M707.88 484.652c37.498-44.542 60.12-102.008 60.12-164.652 0-141.16-114.842-256-256-256h-320v896h384c141.158 0 256-114.842 256-256 0-92.956-49.798-174.496-124.12-219.348zM384 192h101.5c55.968 0 101.5 57.42 101.5 128s-45.532 128-101.5 128h-101.5v-256zM543 832h-159v-256h159c58.45 0 106 57.42 106 128s-47.55 128-106 128z',
|
|
// 'underline': 'M704 64h128v416c0 159.058-143.268 288-320 288-176.73 0-320-128.942-320-288v-416h128v416c0 40.166 18.238 78.704 51.354 108.506 36.896 33.204 86.846 51.494 140.646 51.494s103.75-18.29 140.646-51.494c33.116-29.802 51.354-68.34 51.354-108.506v-416zM192 832h640v128h-640z',
|
|
// 'italic': 'M896 64v64h-128l-320 768h128v64h-448v-64h128l320-768h-128v-64z',
|
|
// 'paragraph-left': 'M0 64h1024v128h-1024zM0 256h640v128h-640zM0 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z',
|
|
// 'paragraph-center': 'M0 64h1024v128h-1024zM192 256h640v128h-640zM192 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z',
|
|
// 'paragraph-right': 'M0 64h1024v128h-1024zM384 256h640v128h-640zM384 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z',
|
|
// 'google': 'M522.2 438.8v175.6h290.4c-11.8 75.4-87.8 220.8-290.4 220.8-174.8 0-317.4-144.8-317.4-323.2s142.6-323.2 317.4-323.2c99.4 0 166 42.4 204 79l139-133.8c-89.2-83.6-204.8-134-343-134-283 0-512 229-512 512s229 512 512 512c295.4 0 491.6-207.8 491.6-500.2 0-33.6-3.6-59.2-8-84.8l-483.6-0.2z',
|
|
// 'facebook': 'M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z',
|
|
// 'twitter': 'M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z',
|
|
// 'linkedin2': 'M384 384h177.106v90.782h2.532c24.64-44.194 84.958-90.782 174.842-90.782 186.946 0 221.52 116.376 221.52 267.734v308.266h-184.61v-273.278c0-65.184-1.334-149.026-96.028-149.026-96.148 0-110.82 70.986-110.82 144.292v278.012h-184.542v-576z M64 384h192v576h-192v-576z M256 224c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z',
|
|
|
|
|
|
class Image extends React.Component {
|
|
|
|
//TODO:https://github.com/veltman/flubber
|
|
// for multi shape interpolation
|
|
state = {
|
|
paths: [
|
|
['M 4.1011306,18.138058 C 2.331559,17.122773 2.6024383,14.859921 4.5707888,14.214339 c 1.1026388,-0.361698 1.9711507,-0.199331 2.8110534,0.525296 0.8690356,0.74987 1.0374015,1.48815 0.5534758,2.427702 -0.6579674,1.277374 -2.4908068,1.741422 -3.8341874,0.970721 z '
|
|
, 'M 10.631851,15.182299 C 9.1656813,14.751768 8.7340471,13.059324 9.8467661,12.103776 10.527925,11.51888 11.447639,11.385214 12.326604,11.743318 c 0.788932,0.321555 1.190552,0.91555 1.190552,1.76115 0,0.689726 -0.633869,1.48443 -1.318177,1.653143 -0.820425,0.201948 -0.955486,0.204293 -1.567128,0.0247 z '
|
|
, 'M 4.7521177,13.02856 C 2.9082762,12.471124 2.3313006,10.653967 3.603096,9.4101092 4.695148,8.3419987 6.4288405,8.3355162 7.5124752,9.3942534 8.285595,10.150333 8.3999412,10.893721 7.8808416,11.788709 7.2663072,12.848273 5.9207259,13.381011 4.7521177,13.027878 Z '
|
|
, 'M 15.388892,12.283788 c -0.58348,-0.202084 -0.968125,-0.775943 -0.968125,-1.444286 0,-1.5622262 2.510542,-2.1126367 3.341497,-0.732767 0.838771,1.392834 -0.662497,2.769942 -2.373372,2.177053 z '
|
|
, 'M 10.24832,9.9111326 C 9.9120272,9.7166264 9.5352364,9.3847324 9.4110101,9.1740924 8.5785356,7.7613854 10.263526,6.053759 12.003506,6.5467794 c 1.831736,0.5192301 2.068755,2.7702231 0.364795,3.4646396 -0.846384,0.344859 -1.395814,0.318794 -2.119981,-0.1002864 z '
|
|
, 'M 4.7709634,7.6206842 C 4.0603393,7.4381829 3.2673775,6.7563237 3.0215248,6.116808 2.3948596,4.4861553 4.2885421,2.8190798 6.2516733,3.2729259 7.6353145,3.5929599 8.506468,4.9099156 8.0846798,6.0438273 7.8009787,6.8068061 7.0880867,7.4384634 6.2985231,7.6270307 5.5598051,7.8031859 5.4791529,7.8027691 4.7709634,7.6201555 Z'],
|
|
['M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z'
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"],
|
|
['M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266'
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"],
|
|
['m 7.9524801,6.8649712 h 4.4013439 v 2.4344997 h 0.06282 c 0.612359,-1.1856702 2.111339,-2.4344997 4.345083,-2.4344997 4.645877,0 5.505101,3.1207251 5.505101,7.1797098 v 8.266623 h -4.587857 v -7.328365 c 0,-1.747966 -0.03217,-3.996275 -2.386436,-3.996275 -2.389421,0 -2.754033,1.903479 -2.754033,3.869364 v 7.455276 H 7.9523576 Z'
|
|
, 'M 0,6.8649712 H 4.7714878 V 22.311304 H 0 Z '
|
|
, 'M 4.7714878,2.5743644 c 0,1.4210168 -1.0681544,2.5743638 -2.3857592,2.5743638 C 1.0681544,5.1487282 0,3.9958278 0,2.5743644 0,1.1533476 1.0680012,0 2.3857286,0 3.7033029,0 4.7714878,1.1529004 4.7714878,2.5743644 Z'
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
, "M0,0 L0.01,0 L0.01,0.01Z"
|
|
],
|
|
|
|
],
|
|
|
|
links: [
|
|
'https://www.talentstube.com/entreprise/5-e-declic/',
|
|
'https://www.facebook.com/edeclic/',
|
|
'https://twitter.com/edeclic',
|
|
'https://www.linkedin.com/company/edeclic/',
|
|
//
|
|
],
|
|
|
|
index: 0
|
|
}
|
|
goNext = () => this.setState(state => ({ index: state.index + 1 >= state.paths.length ? 0 : state.index + 1 }))
|
|
render() {
|
|
const { paths, links, index } = this.state
|
|
|
|
const interpolator = interpolateAll(paths[index], paths[index + 1] || paths[0], { maxSegmentLength: 0.1, single: true })
|
|
// const interpolatorR = separate(paths[0], paths[2] || paths[0], { single: true })
|
|
return (
|
|
<svg width={this.props.svgWidth} viewBox="0 0 22 22" style={{margin: 'auto'}}>
|
|
<Gradient id="gradient" />
|
|
<g fill="url(#gradient)">
|
|
<a href={links[index]} target='_blank'>
|
|
<Spring reset native from={{ t: 0 }} to={{ t: 1 }} onRest={this.goNext} delay={this.props.delay}>
|
|
{({ t }) => <animated.path d={t.interpolate(interpolator)} ></animated.path>}
|
|
|
|
</Spring>
|
|
</a>
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|
|
}
|
|
|
|
Image.defaultProps = {
|
|
delay: '500',
|
|
svgWidth: '100'
|
|
}
|
|
|
|
Image.propTypes = {
|
|
delay: PropTypes.string.isRequired,
|
|
svgWidth: PropTypes.string.isRequired,
|
|
}
|
|
|
|
export default withStyles(styles)(Image) |