Here design of useless web by Sarah Drasner to illustrate, how useless web work?
Sarah Drasner celebrates the joy of useless things with a hand-drawn SVG Rube Goldeberg machine.
In HTML:
<svg class="uselessmachine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 909.8">
<defs>
<clipPath id="clip-path">
<rect class="cls-1" x="835.6" y="259.8" width="26" height="36.84"/>
</clipPath>
</defs>
<title>useless-web2</title>
<image id="car" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/car.png"/>
<image id="scissors2" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/scissors2.png"/>
<image id="scissors1" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/scissors1.png"/>
<image id="e-cup" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/e-cup.png"/>
<image id="s-grass" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/s-grass.png"/>
<image id="main" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/main2.png"/>
<image id="string" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/string.png"/>
<image id="plunger" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/plunger.png"/>
<image id="e-balloon" width="2388" height="1668" transform="scale(0.55)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/e-balloon2.png"/>
<g id="weight">
<g class="cls-2">
<image id="weight_Image" data-name="weight Image" width="37" height="278" transform="translate(838.9 137.5) scale(0.55)" xlink:href="data:image/png;base64,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"/>
</g>
</g>
<g id="bugs">
<g id="bug1">
<circle cx="887.1" cy="445.7" r="1.4"/>
<path class="cls-3" d="M887.5,444.9s2.1-3.9,2.8-2.3-2.6,2.7-2.6,2.7Z"/>
<path class="cls-3" d="M887.6,445.2s4.2-1.6,3.6.1-3.7.4-3.7.4Z"/>
</g>
<g id="bug2">
<circle cx="829.7" cy="461.7" r="1.4"/>
<path class="cls-3" d="M830,460.8s2.1-3.9,2.8-2.3-2.5,2.8-2.5,2.8Z"/>
<path class="cls-3" d="M830.2,461.1s4.1-1.5,3.6.1-3.8.4-3.8.4Z"/>
</g>
<g id="bug3" data-name="bug1">
<circle cx="828.7" cy="432.6" r="1.4"/>
<path class="cls-3" d="M829.1,431.8s2-3.9,2.7-2.3-2.5,2.7-2.5,2.7Z"/>
<path class="cls-3" d="M829.2,432.1s4.1-1.6,3.6.1-3.7.4-3.7.4Z"/>
</g>
<g id="bug4" data-name="bug1">
<circle cx="839.7" cy="468.4" r="1.4"/>
<path class="cls-3" d="M840.1,467.5s2.1-3.9,2.8-2.3-2.6,2.8-2.6,2.8Z"/>
<path class="cls-3" d="M840.2,467.8s4.2-1.5,3.6.1-3.7.4-3.7.4Z"/>
</g>
<g class="bugpaths">
<path id="bug1path" class="cls-3" d="M890.3,442.6s25.9-52.5,47.1-40.4,1.9,23.5,1.9,23.5-13.1,20.8,18.2,10.2,32.7,11.3,32.7,11.3"/>
<path id="bug2path" class="cls-3" d="M831.1,461.7s70-52.8,57.5-70.2,7.7-42.7,18.5-37.1,47.2,35.9,53.7,22-7-67,29.4-46"/>
<path id="bug3path" class="cls-3" d="M830.1,432.6l61.2-23.5s29.7-13.4,16.1-32.7c-10.1-14.4-2.4-46,22.2-38.9s77.2,31.8,56.4,50-25,22-16.2,27,48.9,4.6,51.7,45.2"/>
<path id="bug4path" class="cls-3" d="M840.1,467.5s71.6-16.4,80.7-43.7,19.9-67.5,47.5-56.3,62.1,37.2,74.2,20.4,50.1-50.2,66.4-19,49.7,23.1,24,44.1-71.2,23.3-44.8,37.4-1.5,37.4-1.5,37.4"/>
</g>
</g>
<g id="paths">
<path id="ball1-path" class="cls-1" d="M61.7,191.4l79.8,399.2s51.9,142.3,104.6,14.2c0,0,12.6-32.6,16.8-64.4S283,316.8,283,316.8,293,83.3,368.4,83.3s74.5,192.5,74.5,192.5,4.2,13.5-20.9,24.7-70.4,33.9-70.4,33.9-17.6,4.2-18.4,25.1,20.9,29.7,26.8,30,57.8,16.9,57.8,16.9,15.9-.8,15.9,25.1,7.5,67.3-21.8,67.6-105.2,7.1-105.2,7.1-35.3,4.9-9.7,7.8l11.2-1.1" />
<path id="finalball-path" class="cls-4" d="M1224.3,214.9s-11.2-15.8-16.4,10.1-5.9,30.5-5.9,30.5-6.2,12.2-42.1,20c-52.8,11.6,0,54.7,0,54.7s25.7,17.7,42.1,25.3c14.7,6.9,46.2,16.9,44.2,39.9-1.5,17.4,4.5,22.7-38.7,70.3S905,760.6,905,760.6s123.9-120.6,194.3,0c0,0,59.4-83.8,90.4,0,0,0,32.6-53.6,53.6,0,0,0,23.4-31,41.8,0,0,0,8.1-18.5,17.4,0" />
<path id="ball2path" class="cls-2" d="M633.8,506.9s21.5,1.2,28.5,23.1,9.6,45.4,9.6,45.4" />
</g>
<g id="text">
<g>
<path id="w" d="M642.1,778.9l14.6-92.5q.4-3,3.9-3.3h19.8a4.2,4.2,0,0,1,3.9,3.3l14.6,92.5,14.7-92.5c.3-2.2,1.7-3.3,4.1-3.3H737a4.4,4.4,0,0,1,3,1.2,3.7,3.7,0,0,1,.9,3.1L714.3,829.7q-.6,3.3-4.2,3.3H687.8a4.1,4.1,0,0,1-4.4-3.3l-13-69.3-13,69.3q-.4,3.3-4.2,3.3H630.9a4.1,4.1,0,0,1-4.4-3.3L600,687.4a2.9,2.9,0,0,1,1-3.1,3.5,3.5,0,0,1,3-1.2h19.2a4,4,0,0,1,4.2,3.3Zm.9,6.4a.8.8,0,0,1-.9.9c-.7,0-1-.3-1-.9l-15.8-98.7c0-1.3-.7-1.9-2.1-1.9H604a1.7,1.7,0,0,0-1.6.8c-.7.6-.8,1.1-.5,1.7l26.7,142.3c0,1.1.8,1.6,2.3,1.6h22.3a2.1,2.1,0,0,0,2.3-1.6L669.4,755a1,1,0,0,1,1-.6,1.4,1.4,0,0,1,1.1.6l14,74.5c0,1.1.7,1.6,2.3,1.6h22.3a2.1,2.1,0,0,0,2.3-1.6l26.7-142.3a2.5,2.5,0,0,0-.5-1.7,2.7,2.7,0,0,0-1.6-.8H717.7a2.2,2.2,0,0,0-2.3,1.9l-15.5,98.7c-.4.6-.7.9-1,.9a.8.8,0,0,1-.9-.9l-15.8-98.7c0-1-.7-1.6-2.1-1.9H660.6a2.4,2.4,0,0,0-2.1,1.9Z"/>
<path id="e" d="M761.7,833a4.4,4.4,0,0,1-3-1.1,3.1,3.1,0,0,1-1.1-2.6V686.8a3.3,3.3,0,0,1,1.1-2.7,4.4,4.4,0,0,1,3-1h56.9a4,4,0,0,1,3,1,3.4,3.4,0,0,1,1.2,2.7v16.7a3.7,3.7,0,0,1-1.2,2.6,4.1,4.1,0,0,1-3,1.1H784.5v39h24.4a4.4,4.4,0,0,1,3,1,3.1,3.1,0,0,1,1.1,2.5v16.9a3.2,3.2,0,0,1-1.1,2.5,4.1,4.1,0,0,1-3,1.2H784.5v38.5h34.1a3.8,3.8,0,0,1,3,1.2,3.6,3.6,0,0,1,1.2,2.8v16.5a3.2,3.2,0,0,1-1.2,2.6,4.1,4.1,0,0,1-3,1.1H761.7Zm-2.3-3.7c0,1.3.8,2,2.3,2h56.9c1.6,0,2.3-.7,2.3-2V812.8c0-1.4-.7-2.1-2.3-2.1h-36V768.4h26.3a2.5,2.5,0,0,0,1.6-.6,1.5,1.5,0,0,0,.7-1.2V749.7c0-1.3-.8-1.9-2.3-1.9H782.6V705.3h36c1.6,0,2.3-.6,2.3-1.8V686.8c0-1.4-.7-2.1-2.3-2.1H761.7c-1.5,0-2.3.7-2.3,2.1Z"/>
<path id="b" d="M840.7,686.6a3.4,3.4,0,0,1,1.2-2.6,4.3,4.3,0,0,1,3-1.1h31.8a34.9,34.9,0,0,1,12.4,2.2,33.3,33.3,0,0,1,10.3,6.2,30,30,0,0,1,7,9.2,24.9,24.9,0,0,1,2.5,11v27.4c0,7.6-3.4,13.2-10.2,17,6.8,3.5,10.2,9.2,10.2,16.9v31.5a24.4,24.4,0,0,1-2.5,11.1,29.6,29.6,0,0,1-7,9.1,33.3,33.3,0,0,1-10.3,6.2,34.9,34.9,0,0,1-12.4,2.3H844.9a4.4,4.4,0,0,1-3-1.2,3.5,3.5,0,0,1-1.2-2.8ZM842.8,829a1.9,1.9,0,0,0,2.1,2.1h31.8a32.8,32.8,0,0,0,11.7-2.1,27.7,27.7,0,0,0,9.5-5.7,28.7,28.7,0,0,0,6.5-8.6,23,23,0,0,0,2.4-10.4V772.8c0-7.6-3.4-13-10.4-16.3l-1.6-.6,1.6-.9c7-3.3,10.4-8.6,10.4-16.1V711.5a23,23,0,0,0-2.4-10.4,30,30,0,0,0-6.5-8.6,31.2,31.2,0,0,0-9.5-5.7,32.8,32.8,0,0,0-11.7-2.1H844.9c-1.4,0-2.1.6-2.1,1.9Zm33.9-83.9H866V705.3h10.9a6.7,6.7,0,0,1,3.7,1.1,5.2,5.2,0,0,1,2.3,2.6,5,5,0,0,1,.7,2.5v27.4a3.2,3.2,0,0,1-.7,2.3c-.9,2.3-2.9,3.7-6,3.9Zm0,65.4H866V766.6h10.9a6.6,6.6,0,0,1,3.7,1,5.4,5.4,0,0,1,2.3,2.7,4.5,4.5,0,0,1,.7,2.5v31.5a4.7,4.7,0,0,1-.7,2.5c-1.1,2.2-3.1,3.4-6,3.7Zm-8.9-67h8.9a5.6,5.6,0,0,0,3.6-1.4,4.1,4.1,0,0,0,1.5-3.2V711.5a4.2,4.2,0,0,0-1.5-3.2,5.5,5.5,0,0,0-3.6-1.3h-8.9Zm0,65.3h8.9a5.5,5.5,0,0,0,3.6-1.3,4.2,4.2,0,0,0,1.5-3.2V772.8a4.1,4.1,0,0,0-1.5-3.2,5.6,5.6,0,0,0-3.6-1.4h-8.9Z"/>
</g>
<g class="the">
<path d="M241.8,191.4a1.8,1.8,0,0,1-2-2.1V118.2h-10a1.8,1.8,0,0,1-1.5-.7,2,2,0,0,1-.6-1.5v-9.8a2.1,2.1,0,0,1,2.1-2.1h34a2,2,0,0,1,1.5.6,2,2,0,0,1,.5,1.5V116a2,2,0,0,1-.5,1.5,1.8,1.8,0,0,1-1.5.7H253.7v71.1c0,1.4-.6,2.1-1.9,2.1Zm-1-74.3v72.2c0,.8.3,1.1,1,1.1h10c.6,0,1-.3,1-1.1V117.1h11a1,1,0,0,0,1.1-1.1v-9.8a1.3,1.3,0,0,0-.3-.8,1.1,1.1,0,0,0-.8-.3h-34a1.2,1.2,0,0,0-.9.3,1.3,1.3,0,0,0-.3.8V116c0,.7.4,1.1,1.2,1.1Z"/>
<path d="M288.6,140.7h8.2V106.4a2.6,2.6,0,0,1,.7-1.6,2.8,2.8,0,0,1,1.6-.6h9.6a2.6,2.6,0,0,1,1.6.6,2.5,2.5,0,0,1,.6,1.6v82.8a2.1,2.1,0,0,1-2.2,2.2h-9.6a2.3,2.3,0,0,1-1.6-.6,2.2,2.2,0,0,1-.7-1.6V154.8h-8.2v34.4a2.1,2.1,0,0,1-.6,1.6,2.3,2.3,0,0,1-1.6.6h-9.7a2,2,0,0,1-1.5-.6,1.9,1.9,0,0,1-.7-1.6V106.4a2.1,2.1,0,0,1,.7-1.6,2.5,2.5,0,0,1,1.5-.6h9.7a2.8,2.8,0,0,1,1.6.6,2.5,2.5,0,0,1,.6,1.6Zm-1,1.1V106.4a1.1,1.1,0,0,0-1.2-1.2h-9.7c-.7,0-1.1.4-1.1,1.2v82.8c0,.8.4,1.2,1.1,1.2h9.7a1.1,1.1,0,0,0,1.2-1.2V153.8h10.3v35.4a1.1,1.1,0,0,0,1.2,1.2h9.6a1.1,1.1,0,0,0,1.2-1.2V106.4a1.1,1.1,0,0,0-1.2-1.2h-9.6a1.1,1.1,0,0,0-1.2,1.2v35.4Z"/>
<path d="M322.4,191.4a2,2,0,0,1-1.5-.6,2.1,2.1,0,0,1-.6-1.6V106.3a2.3,2.3,0,0,1,.6-1.6,2,2,0,0,1,1.5-.6h29.4a2.1,2.1,0,0,1,1.6.6,2.3,2.3,0,0,1,.6,1.6V116a2,2,0,0,1-.6,1.5,1.9,1.9,0,0,1-1.6.7H334.2v22.6h12.6a2.8,2.8,0,0,1,1.6.6,2.2,2.2,0,0,1,.6,1.5v9.8a2,2,0,0,1-.6,1.5,2,2,0,0,1-1.6.7H334.2v22.4h17.6a2.2,2.2,0,0,1,1.6.7,2.3,2.3,0,0,1,.6,1.6v9.6a2.1,2.1,0,0,1-2.2,2.2H322.4Zm-1.2-2.2a1.1,1.1,0,0,0,1.2,1.2h29.4a1.1,1.1,0,0,0,1.2-1.2v-9.6a1.1,1.1,0,0,0-1.2-1.2H333.2V153.8h13.6a.9.9,0,0,0,.8-.4.8.8,0,0,0,.4-.7v-9.8c0-.7-.4-1.1-1.2-1.1H333.2V117.1h18.6c.8,0,1.2-.4,1.2-1.1v-9.7a1.1,1.1,0,0,0-1.2-1.2H322.4a1.1,1.1,0,0,0-1.2,1.2Z"/>
</g>
</g>
<g id="balls">
<circle id="ball2" class="cls-5" cx="584.3" cy="424.1" r="8"/>
<circle id="finalball" data-name="finalball" class="cls-5" cx="1227.5" cy="225" r="7.2"/>
<circle id="ball1" class="cls-5" cx="61.7" cy="191.4" r="9.1"/>
</g>
</svg>In CSS:
body {
display: grid;
place-items: center;
}
.uselessmachine {
max-width: 50vw;
width: 100vw;
height: 100vh;
}
.cls-1, .cls-3, .cls-4 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
stroke: #000;
}
.cls-3, .cls-4 {
stroke-miterlimit: 10;
}
.cls-4 {
stroke: #202736;
}
.cls-5 {
fill: #202736;
}
#ball2, .bugpaths, #paths {
visibility: hidden;
opacity: 0;
}In Js:
gsap.registerPlugin(MotionPathPlugin);
const machine = () => {
let tl = gsap
.timeline({
defaults: {
ease: "circ",
duration: 1
}
})
tl.add('start')
tl.to("#ball1", {
duration: 5,
ease: "bounce",
motionPath:{
path: "#ball1-path",
align: "#ball1-path",
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start')
tl.to("#car", {
x: 100
}, 'start+=1.75')
tl.to("#e-cup", {
rotation: 90,
ease: 'bounce',
svgOrigin: '550 500'
}, 'start+=2.5')
tl.to("#ball2", {
duration: 0.1,
autoAlpha: 1
}, 'start+=3.5')
tl.to("#ball2", {
duration: 0.2,
ease: 'power4',
motionPath:{
path: "#ball2path",
align: "#ball2path",
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=3.5')
tl.to("#ball2", {
duration: 0.1,
autoAlpha: 0
}, 'start+=3.8')
tl.to("#scissors1", {
duration: 0.3,
y: 10
}, 'start+=3.9')
tl.to("#scissors2", {
duration: 0.3,
y: -10,
rotation: -20,
svgOrigin: '740 300'
}, 'start+=3.9')
tl.to("#string", {
duration: 0.1,
autoAlpha: 0
}, 'start+=3.9')
tl.to("#weight", {
duration: 0.3,
y: 200
}, 'start+=3.9')
tl.to("#e-balloon", {
duration: 0.3,
scaleX: 0.7,
svgOrigin: '850 450'
}, 'start+=4.2')
tl.to("#e-balloon", {
duration: 0.1,
autoAlpha: 0
}, 'start+=4.5')
tl.to(`#bug1`, {
duration: 4,
motionPath:{
path: `#bug1path`,
align: `#bug1path`,
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=4.5')
tl.to(`#bug2`, {
duration: 4,
motionPath:{
path: `#bug2path`,
align: `#bug2path`,
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=4.5')
tl.to(`#bug3`, {
duration: 4,
motionPath:{
path: `#bug3path`,
align: `#bug3path`,
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=4.5')
tl.to(`#bug4`, {
duration: 4,
motionPath:{
path: `#bug4path`,
align: `#bug4path`,
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=4.5')
tl.to(`#s-grass, #bugs`, {
duration: 0.2,
y: 5
}, 'start+=8.3')
tl.to(`#plunger`, {
duration: 0.2,
y: -5
}, 'start+=8.3')
tl.to(`#finalball`, {
ease: 'power4',
duration: 4,
motionPath:{
path: `#finalball-path`,
align: `#finalball-path`,
autoRotate: true,
alignOrigin: [0.5, 0.5]
}
}, 'start+=8.5')
tl.to(`#b`, {
duration: 0.3,
ease: 'bounce',
rotation: -10,
transformOrigin: `50% 100%`
}, 'start+=9.2')
tl.to(`#e`, {
duration: 0.3,
ease: 'bounce',
rotation: -10,
transformOrigin: `50% 100%`
}, 'start+=9.3')
tl.to(`#w`, {
duration: 0.3,
ease: 'bounce',
rotation: -70,
transformOrigin: `50% 100%`
}, 'start+=9.4')
}
window.onload = () => {
machine()
//gsap.globalTimeline.timeScale(1.2);
};Now In Codepen with complete Code:
