// imports, polyfills, and globals
require('core-js') // polyfills. specifically for Object.values() and Object.entries()
let html
const React = require('react')
const { renderToString } = require('react-dom/server');
const _styled = require('styled-components')
const styled = _styled.default
const { css, keyframes, injectGlobal } = _styled
const render = component => {
const sheet = new _styled.ServerStyleSheet()
html = renderToString(sheet.collectStyles(component))
return sheet.getStyleTags() + html
}
// container to stretch to the max width and height of the Rendered HTML box
const Container = styled.div`
display: flex;
align-items: center;
justify-content: center;
${({ bg }) => bg && css`
background-color: ${bg};
`}
height: 450px; /* total max height: 509px, 509 - 28 - 16 = 464px (size of runkit box)*/
// width: 90%;/* 882px; /* total max width: 898px w/ padding of 8 on both sides 882px (size of runkit box) */
`
const Container2 = styled.div`
overflow: hidden;
${({ bg }) => bg && css`
background: ${bg};
`}
height: 450px; /* total max height: 509px, 509 - 28 - 16 = 464px (size of runkit box)*/
`
This was a really cool animation I saw and thought, why not replicate this in styled components? :)
http://bradfrost.github.io/this-is-responsive/
const scales = [
['.8', '.6', '.7'],
['.4, 1', '1, .4', '1'],
['.7, .9', '.2, .7', '.9, .88'],
['.4, .48', '.3', '.35, .85'],
['.5, .2', '.22, .38', '.5'],
['.45, .4', '.4, .48', '.8, .95'],
['.77, .57', '.87, .56', '.72, .55'],
['.9, .52', '.7, .9', '.33, .44'],
['.66, .33', '.4, .2', '.75, .67'],
['.8, .4', '.93, .66', '.45, .77']
]
const keyframesBy = scale => keyframes`
0% { transform: scale(${scale[0]}); }
50% { transform: scale(${scale[1]}); }
100% { transform: scale(${scale[2]}); }
`
const red = '229,24,55, .22'
const limegreen = '170, 255, 112, .21'
const green = '0, 255, 0, .14'
const blue = '0, 40, 250, .21'
var Box = styled.b`
width: 90%;
height: 90%;
position: absolute;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
background: rgba(${blue});
animation: ${({ scale }) => keyframesBy(scale)} 10s infinite alternate both;
`
render(
<Container>
{Array.from({ length: 10 }, (_, i) => (
<Box scale={scales[i]} />
))}
</Container>
)
Atom, from pure css
const AtomContainer = styled.div`
height: 160px;
width: 160px;
border-radius: 50%;
perspective: 800px;
display: block;
`
var rotate = (x, y) => keyframes`
0% { transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(0deg); }
100% { transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(360deg); }
`
const Base = styled.div`
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
`
const Nucleas = Base.extend`
width: 10px;
height: 10px;
background: #26A65B;
top: calc(50% - 3px);
left: calc(50% - 3px);
`
const Electron = Base.extend`
${({ position, rotation }) => css`
animation: ${rotate(...rotation)} 1s linear infinite;
border-${position}: 3px solid limegreen;
`}
`
const electrons = {
bottom: [35, -45],
right: [50, 10],
top: [35, 55]
}
const Atom = () => (
<AtomContainer>
{Object.entries(electrons).map(([ position, rotation ]) => (
<Electron position={position} rotation={rotation} />
))}
<Nucleas />
</AtomContainer>
)
render(
<Container>
<Atom />
</Container>
)
Webpack logo: https://webpack.github.io/
const _CubeContainer = styled.ul`
position: absolute;
display: block;
width: 100%;
height: 100%;
padding: 0;
top: 50%;
left: 50%;
transform: rotateX(-33.5deg) rotateY(45deg);
transform-style: preserve-3d;
`
const Panel = styled.li`
transition: transform 1s ease-in-out;
position: absolute;
display: block;
`
const transformDegrees = Object.values({
front: [0, 0],
back: [-180, 0],
right: [0, 90],
left: [0, -90],
top: [90, 0],
bottom: [-90, 0]
})
const spin = deg => keyframes`
0% { transform: rotateX(-33.5deg) rotateY(45deg) }
10%, to { transform: rotateX(-33.5deg) rotateY(${deg}deg) }
`
const InnerContainer = _CubeContainer.extend`
transform-origin: 25px 25px;
margin: -25px 0 0 -25px;
animation: ${spin(-315)} 10s ease-in-out infinite 2s;
`
const InnerPanel = Panel.extend`
width: 50px;
height: 50px;
background: radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%);
transform: rotateX(${props => props.x}deg) rotateY(${props => props.y}deg) translateZ(25px);
&:after {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
backface-visibility: hidden;
background-color: rgba(16,58,177,.5);
transition: transform 1s ease-in-out;
}
`
const CubeInner = () => (
<InnerContainer>
{transformDegrees.map(([ x, y ], i) => <InnerPanel x={x} y={y} key={i} />)}
</InnerContainer>
)
const OuterContainer = _CubeContainer.extend`
transform-origin: 50px 50px;
animation: ${spin(225)} 10s ease-in-out infinite 2s;
margin: -50px 0 0 -50px;
`
const OuterPanel = Panel.extend`
width: 75pt;
height: 75pt;
transform: rotateX(${props => props.x}deg) rotateY(${props => props.y}deg) translateZ(50px);
background: radial-gradient(transparent 30%,rgba(16,47,91,.2) 100%);
/* &:after {
content: "";
display: block;
position: absolute;
width: 75pt;
height: 75pt;
backface-visibility: hidden;
background-color: rgba(126,169,232,.5);
transition: transform 1s ease-in-out;
} */
`
const CubeOuter = () => (
<OuterContainer>
{transformDegrees.map(([x, y], i) => <OuterPanel x={x} y={y} key={i} />)}
</OuterContainer>
)
const CubeContainer = styled.div`
transform: scale(2.7);
height: 450px;
position: relative;
overflow: hidden;
`
const Cube = () => (
<CubeContainer>
<CubeInner />
<CubeOuter />
</CubeContainer>
)
render(
<Container2>
<Cube />
</Container2>
)
This was taken from here: https://codepen.io/kowlor/pen/NqVozL
I definitely think this one can be done better. I found an "adjust-hue" for JS here: http://bit.ly/2BBTKu6
const circleSpin = keyframes`
from { transform: rotateY(360deg) rotateX(-360deg) rotateZ(360deg) }
`
const CircleContainer = styled.div`
height: 220px;
width: 220px;
animation: ${circleSpin} 7s linear infinite;
transform-style: preserve-3d;
`
var colors = [null, '#F06', '#ff0048', '#ff002b', '#ff000d', '#ff1100', '#ff2f00', '#ff4d00', '#ff6a00', '#ff8800', '#ffa600', '#ffc400', '#ffe100', 'yellow', '#e1ff00', '#c4ff00', '#a6ff00', '#88ff00', '#6aff00', '#4dff00', '#2fff00', '#11ff00', '#00ff0d', '#00ff2b', '#00ff48', '#00ff66', '#00ff84', '#00ffa2', '#00ffbf', '#00ffdd', '#00fffb', '#00e6ff', '#00c8ff', '#00aaff', '#008cff', '#006fff', '#0051ff', '#0033ff', '#0015ff', '#0900ff', '#2600ff', '#4400ff', '#6200ff', '#8000ff', '#9d00ff', '#bb00ff']
var Circle = styled.div`
height: 220px;
width: 220px;
border: 1px solid #F06;
border-radius: 50%;
position: absolute;
${Array.from({ length: 45 }, (_, i) => css`
&:nth-child(${i + 1}) {
border-color: ${colors[i + 1]};
animation: ${circleSpin} 7.2s linear ${(i + 1) * 0.04}s infinite;
opacity: ${(i + 1) * .006};
}
`)}
`
const Sphere = () => (
<CircleContainer>
{Array.from({ length: 45 }, (_, i) => (
<Circle key={i} />
))}
</CircleContainer>
)
render(
<Container bg='black'>
<Sphere />
</Container>
)
Dodecahedron - https://codepen.io/wontem/pen/PqYXop
const dodecahedronRotate = keyframes`
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
`
const dColor = 'crimson' // '#00ff00c2'
const dStyles = css`
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
margin: auto;
transform-style: preserve-3d;
`
const outerCircle = css`
content: "";
${dStyles}
width: 10%;
height: 10%;
background: ${dColor};
box-shadow: 0 0 60px 2px ${dColor};
`
const Plane = styled.div`
width: 120px;
height: 120px;
${dStyles}
transform: rotateX(60deg) rotateZ(-30deg);
animation: ${dodecahedronRotate} 20s infinite linear;
box-shadow: 0 0 60px ${dColor}, inset 0 0 60px ${dColor};
`
var Circle = styled.div`
width: 120px;
height: 120px;
${dStyles}
box-shadow: 0 0 60px ${dColor}, inset 0 0 60px ${dColor};
&:after {
${outerCircle}
transform: translateZ(90px);
}
&:before {
${outerCircle}
transform: translateZ(-90px);
}
${Array.from({ length: 5 }, (_, i) => css`
&:nth-child(${i + 1}) {
transform: rotateZ(${72 * (i + 1)}deg) rotateX(63.435deg);
}
`)}
`
const Dodecahedron = () => (
<Plane>
{Array.from({ length: 6 }, (_, i) => (
<Circle key={i} />
))}
</Plane>
)
render(
<Container bg='black'>
<Dodecahedron />
</Container>
)
Hexagon loader: https://codepen.io/endodoug/pen/ecBkL
var pulse = keyframes`
0% { transform: scale(1); }
50% { transform: scale(0.01); }
100% { transform: scale(1); }
`
const HexContainer = styled.div`
${({ width }) => css`
width: ${width}px;
height: ${width}px;
margin: -${width / 2}px 0 0 -${width / 2}px;
`}
position: absolute;
left: 50%;
top: 50%;
`
const HexWrap = styled.div`
position: absolute;
top: 50%;
left: 50%;
${({ size, x, y, ring }) => css`
height: ${size}px;
width: ${size}px;
margin: ${y - .5 * size}px 0 0 ${x - .5 * size}px;
animation: 2s infinite ${ring * .2}s ${pulse};
`}
`
const hexStyle = css`
position: absolute;
background-color: inherit;
width: inherit;
content: '';
`
const HexParts = styled.div`
${({ color, size }) => css`
margin-top: calc(50% - ${size / 2}px);
background-color: ${color};
`}
position: absolute;
width: 100%;
height: calc(100% * 0.57735);
top: 50%;
transform: translateY(-50%);
&:before {
height: ${props => props.size * 0.57735}px;
${hexStyle}
transform: rotateZ(60deg);
}
&:after {
height: ${props => props.size * 0.57735}px;
${hexStyle}
transform: rotateZ(-60deg);
}
`
const Hexagon = props => <HexWrap {...props}><HexParts {...props} /></HexWrap>
var hexaPositions = (origin, direction, number) => {
var points = []
var curPos = origin
for(var i = 0; i < number; ++i) {
var [cx, cy] = curPos
var [dx, dy] = direction
var newPos = [cx + dx, cy + dy]
curPos = newPos
points.push(newPos)
}
return points
}
var positions = (rings, hexWidth, gap) => {
var directions = {
right: [hexWidth + gap, 0],
downRight: [hexWidth / 2 + (.5 * gap), hexWidth],
downLeft: [-hexWidth / 2 - (.5 * gap), hexWidth],
left: [-hexWidth - gap, 0],
upLeft: [-hexWidth / 2 - (.5 * gap), -hexWidth],
upRight: [hexWidth / 2 + (.5 * gap), -hexWidth]
}
var points = [[0,0]]
var layer = 1
for(var layer = 1; layer < rings; ++layer) {
//² this doesn't make this O(n³) since it's 6 every time
for(var [key, direction] of Object.entries(directions)) {
var currLayer = key === 'downRight' ? layer - 1 : layer
points.push(...hexaPositions(points[points.length - 1], direction, currLayer))
}
}
points.push(...hexaPositions(points[points.length - 1], directions.right, rings - 1))
return points
}
const HoneyComb = ({ rings = 2, color = '#79ff02', size = 25, gap = 2 }) => (
<HexContainer width={(2 * rings * size) + size}>
{positions(rings, size, gap).map(([x, y], i) => (
<Hexagon y={y} x={x} ring={Math.pow(i, .3)} color={color} size={size} key={i} />
))}
</HexContainer>
)
render(
<Container bg='black'>
<HoneyComb rings={6} size={15} />
</Container>
)
/**
* Made with ❤ by @alex-cory & @JmsMaupin1
*/
Cool little day/night toggle - https://codepen.io/bnthor/pen/WQBNxO
const ToggleWrapper = styled.div`
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
padding: 0 200px;
transform: translate3d(-50%, -50%, 0);
`
const Label = styled.label.attrs({ htmlFor: 'cb' })`
cursor: pointer;
display: inline-block;
position: relative;
width: 90px;
height: 50px;
background-color: #83D8FF;
border-radius: 84px;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
&:before {
content: 'AM';
position: absolute;
top: 15px;
left: -50px;
font-size: 18px;
color: #FFFFFF;
}
&:after {
content: 'PM';
position: absolute;
right: -48px;
top: 15px;
font-size: 18px;
color: #749ED7;
}
`
const SunMoonWrapper = styled.span`
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
left: 3px;
width: 44px;
height: 44px;
background-color: #FFCF96;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(-45deg);
`
const Crater = styled.span`
position: absolute;
background-color: #E8CDA5;
opacity: 0;
transition: opacity 200ms ease-in-out;
border-radius: 50%;
`
const Crater1 = Crater.extend`
top: 18px;
left: 10px;
width: 4px;
height: 4px;
`
const Crater2 = Crater.extend`
top: 28px;
left: 22px;
width: 6px;
height: 6px;
`
const Crater3 = Crater.extend`
top: 10px;
left: 25px;
width: 8px;
height: 8px;
`
const SunMoon = () => (
<SunMoonWrapper>
<Crater1 />
<Crater2 />
<Crater3 />
</SunMoonWrapper>
)
const StarCloud = styled.span`
position: absolute;
background-color: #ffffff;
transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
z-index: 0;
`
const StarCloud1 = StarCloud.extend`
top: 10px;
left: 35px;
width: 30px;
height: 3px;
`
const StarCloud2 = StarCloud.extend`
top: 18px;
left: 28px;
width: 30px;
height: 3px;
z-index: 1;
`
const StarCloud3 = StarCloud.extend`
top: 27px;
left: 40px;
width: 30px;
height: 3px;
`
const Star = StarCloud.extend`
opacity: 0;
transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
transform: translate3d(3px, 0, 0);
`
const Star4 = Star.extend`
top: 16px;
left: 11px;
width: 2px;
height: 2px;
`
const Star5 = Star.extend`
top: 32px;
left: 17px;
width: 3px;
height: 3px;
`
const Star6 = Star.extend`
top: 36px;
left: 28px;
width: 2px;
height: 2px;
`
const Checkbox = styled.input.attrs({ type: 'checkbox', id: 'cb' })`
position: absolute;
left: -99em;
&:checked + ${Label} {
background-color: #749DD6;
&:before {
color: #749ED7;
}
&:after {
color: #ffffff;
}
${SunMoonWrapper} {
background-color: #FFE5B5;
transform: translate3d(40px, 0, 0) rotate(0);
${Crater1}, ${Crater2}, ${Crater3} {
opacity: 1;
}
${Star4}, ${Star5}, ${Star6} {
transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
}
${Star4}, ${Star5}, ${Star6} {
opacity: 1;
transform: translate3d(0, 0, 0);
}
${StarCloud1} {
width: 2px;
height: 2px;
}
${StarCloud2} {
width: 4px;
height: 4px;
transform: translate3d(-5px, 0, 0);
}
${StarCloud3} {
width: 2px;
height: 2px;
transform: translate3d(-7px, 0, 0);
}
}
`
const DayNightToggle = () => (
<ToggleWrapper>
<Checkbox />
<Label>
<SunMoon />
<StarCloud1 />
<StarCloud2 />
<StarCloud3 />
<Star4 />
<Star5 />
<Star6 />
</Label>
</ToggleWrapper>
)
render(
<Container bg='#1E314F'>
<DayNightToggle />
</Container>
)
Smooth Pulse - https://codepen.io/Raphael/pen/fqweF
Could do lighten() and use hsl() for colors: http://bit.ly/2Cenldr
const PulseContainer = styled.div`
width: 470px;
justify-content: space-between;
display: flex;
`
var dots = [
{
bg: '#33ffbb',
anim: ['rgba(26, 255, 179, 0)', '#1affb3'],
redBg: '#ff3333',
redAnim: ['#ff1a1a', 'rgba(255, 26, 26, 0)']
},
{
bg: '#33ffdd',
anim: ['rgba(26, 255, 217, 0)', '#1affd9'],
redBg: '#ff4733',
redAnim: ['#ff301a', 'rgba(255, 48, 26, 0)']
},
{
bg: '#33ffff',
anim: ['rgba(26, 255, 255, 0)', '#1affff'],
redBg: '#ff5c33',
redAnim: ['#ff471a', 'rgba(255, 71, 26, 0)']
},
{
bg: '#33ddff',
anim: ['rgba(26, 217, 255, 0)', '#1ad9ff'],
redBg: '#ff7033',
redAnim: ['#ff5e1a', 'rgba(255, 94, 26, 0)']
},
{
bg: '#33bbff',
anim: ['rgba(26, 179, 255, 0)', '#1ab3ff'],
redBg: '#ff8533',
redAnim: ['#ff751a', 'rgba(255, 117, 26, 0)']
},
{
bg: '#3399ff',
anim: ['rgba(26, 140, 255, 0)', '#1a8cff'],
redBg: '#ff9933',
redAnim: ['#ff8c1a', 'rgba(255, 140, 26, 0)']
}
]
var pulse = ([ from, to ]) => keyframes`
0% { box-shadow: 0 0 8px 6px ${from}, 0 0 0px 0px #333, 0 0 0px 0px ${from}; }
10% { box-shadow: 0 0 8px 6px ${to}, 0 0 12px 10px #333, 0 0 12px 14px ${to}; }
100% { box-shadow: 0 0 8px 6px ${from}, 0 0 0px 40px #333, 0 0 0px 40px ${from}; }
`
var redPulse = ([ from, to ]) => keyframes`
from { box-shadow: 0 0 8px 6px ${from}, 0 0 12px 10px #333, 0 0 12px 14px ${from}; }
to { box-shadow: 0 0 8px 6px ${to}, 0 0 4px 40px #333, 0 0 4px 41px ${to}; }
`
const Dot = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
float: left;
transition: all 0.2s;
${dots.map(({ bg, anim, redBg, redAnim }, i) => css`
&:nth-child(${i + 1}) {
background: ${bg};
animation: ${pulse(anim)} 2s ${i * .25}s ease-out infinite;
&:hover {
background: ${redBg};
animation: ${redPulse(redAnim)} 0.5s 0.4s ease-out infinite;
}
}
`)}
`
const SmoothPulse = () => (
<PulseContainer>
{Array.from({ length: 6 }, (_, i) => (
<Dot key={i} />
))}
</PulseContainer>
)
render(
<Container bg='#333'>
<SmoothPulse />
</Container>
)
Peely Text - https://codepen.io/Michiel/pen/OPPKMr?editors=1100
const PeelyContainer = styled.p`
color: #fff;
font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif;
font-size: 1em;
font-weight: 700;
& > span:first-child {
margin-left: 0;
}
`
const beforeAfter = css`
display: block;
position: absolute;
top: 0;
left: -1px;
transform-origin: left top;
transition: all ease-out 0.3s;
`
const Letter = styled.span`
font-size: 60px;
display: inline-block;
position: relative;
transform-style: preserve-3d;
perspective: 500;
margin-left: .3em;
&:before {
${beforeAfter}
z-index: 1;
color: rgba(0,0,0,0.2);
transform: scale(1.1, 1) skew(0deg, 20deg);
content: '${props => props.children}';
}
&:hover::before {
transform: scale(1.1, 1) skew(0deg, 5deg);
}
&:after {
${beforeAfter}
z-index: 2;
color: #119711;
text-shadow: -1px 0 1px #119711, 1px 0 1px rgba(0,0,0,0.8);
transform: rotateY(-40deg);
content: '${props => props.children}';
}
&:hover::after {
transform: rotateY(-10deg);
}
`
const Peeled = ({ phrase = 'Peeled' }) => (
<PeelyContainer>
{phrase.split('').map((letter, i) => (
<Letter key={i}>{letter.toUpperCase()}</Letter>
))}
</PeelyContainer>
)
render(
<Container bg='#119711'>
<Peeled phrase='Alex Cory' />
</Container>
)
Trippy - https://codepen.io/micjamking/pen/obdGw
const TrippyContainer = styled.div`
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
`
var rotate = keyframes`
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
`
var Box = styled.div`
height: 94%;
width: 94%;
background: white;
position: absolute;
top: 50%;
left: 50%;
margin: -47% 0 0 -47%;
`
const Black = Box.extend`
background: black;
animation: ${rotate} 10s infinite linear;
`
const Boxes = ({ num, dom }) => {
if (!num) return dom
if (num % 2 === 0) {
dom = <Box>{dom}</Box>
} else {
dom = <Black>{dom}</Black>
}
num--
return Boxes({ num, dom })
}
const Trippy = ({ boxes = 29 }) => (
<TrippyContainer>
<Boxes num={boxes} />
</TrippyContainer>
)
render(
<Container2 bg='black'>
<Trippy />
</Container2>
)
- stars background - https://codepen.io/saransh/pen/BKJun
var animStar = keyframes`
from { transform: translateY(0px); }
to { transform: translateY(-2000px); }
`
var multipleBoxShadow = length => {
const random = x => Math.floor(Math.random(x) * x)
var value = `${random(2000)}px ${random(2000)}px #FFF`
for (var i in Array.from({ length })) {
value += `, ${random(2000)}px ${random(2000)}px #FFF`
}
return value
}
var stars = (h, w, animationTime, shadow) => styled.div`
width: ${w}px;
height: ${h}px;
background: transparent;
box-shadow: ${multipleBoxShadow(shadow)};
animation: ${animStar} ${animationTime}s linear infinite;
&:after {
content: " ";
position: absolute;
top: 2000px;
width: ${w}px;
height: ${h}px;
box-shadow: ${multipleBoxShadow(shadow)};
}
`
var SmallStars = stars(1, 1, 50, 700)
var MediumStars = stars(2, 2, 100, 200)
var BigStars = stars(3, 3, 150, 100)
var Stars = () => (
<div>
<SmallStars />
<MediumStars />
<BigStars />
</div>
)
render(
<Container2 bg='radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)'>
<SmallStars />
<MediumStars />
<BigStars />
</Container2>
)
Try to implement this in styled components
- https://codepen.io/jpanter/pen/PWWQXK
- EASY CHALLENGE: https://www.pinterest.com.au/pin/436849232597044376/
- E CH: https://www.pinterest.com.au/pin/575616396100321715/
- CHALLENGE: https://www.pinterest.com.au/pin/475763148111881912/
- CHALLENGE: https://dribbble.com/shots/3704963-Natural-OS-most-advanced-AI-operating-system
- CHALLENGE: https://www.pinterest.com.au/pin/269512358925179054/
- CHALLENGE: https://www.pinterest.com.au/pin/396598310909357807/
- CHALLENGE: https://www.pinterest.com.au/pin/524739794069154288/
- CHALLENGE: https://www.pinterest.com.au/pin/231724343307837052/
- CHALLENGE: https://www.pinterest.com.au/pin/444800900683342942/
- http://tobiasahlin.com/spinkit/
- https://codepen.io/fuzzybird/pen/wgmEGV
- https://tympanus.net/Development/ShapeOverlays/index6.html
- http://bit.ly/2zgQNZV
- https://codepen.io/jooeycheng/pen/bpvqMx
- SVG - https://codepen.io/Bidji/pen/dPEzwq
- SVG - https://codepen.io/andreas_hjortland/pen/WjJVqB
- SVG - https://codepad.co/snippet/lbEeOEpT
- https://codepen.io/lukemeyrick/pen/qdxqwM
- canvas: https://j11y.io/p/Sonic/repo/demo/demo.html
CANVAS Backgrounds:
- particle.js - https://vincentgarreau.com/particles.js/
no comments
sign in to comment