polygon.component.js

import React from 'react'
import styled, { keyframes } from 'styled-components'

const Svg = styled.svg.attrs({
    version: '1.1',
    xmlns: 'http://www.w3.org/2000/svg',
    xmlnsXlink: 'http://www.w3.org/1999/xlink',
    'xmlns:sketch': 'http://www.bohemiancoding.com/sketch/ns'
})`
    position: relative;
`

const G = styled.g.attrs({
    fill: 'none',
    stroke: 'none',
    strokeWidth: '1',
    fillRule: 'evenodd',
    'sketch:type': 'MSPage'
})``

const float = keyframes`
    100% {
        transform: translateY(20px);
    }
`

const Polygon = styled.path.attrs({
    strokeWidth: '6',
    'sketch:type': 'MSShapeGroup'
})`
    animation: ${float} 1s infinite ease-in-out alternate;
    animation-delay: ${props => props.delay}s;
`

export default () => (
    <Svg width="380px" height="500px" viewBox="0 0 837 1045">
        <G>
            <Polygon
                d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z"
                stroke="#007FB2"
                delay={0}
            />
            <Polygon
                d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z"
                stroke="#EF4A5B"
                delay={0.2}
            />
            <Polygon
                d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z"
                stroke="#795D9C"
                delay={0.4}
            />
            <Polygon
                d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z"
                stroke="#F2773F"
                delay={0.6}
            />
            <Polygon
                d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z"
                stroke="#36B455"
                delay={0.8}
            />
        </G>
    </Svg>
)