Workcell

Developer
Alexander Hadik
Size
5,864 Kb
Views
22,264
  1. Workcell Previews
  2. Workcell HTML Codes
  3. Workcell CSS Codes
  4. Workcell JS Codes

How do I make an workcell?

What is a workcell? How do you make a workcell? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Workcell Previews
IQ Test

Workcell - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Workcell</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg data-name="Layer 1" id="Layer_1" viewBox="0 0 2226 964" xmlns="http://www.w3.org/2000/svg"> <defs> <style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{fill:none}.cls-1{clip-rule:evenodd}.cls-3,.cls-5,.cls-6,.cls-7{stroke:#c1c7cd}.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{stroke-miterlimit:10}.cls-3{stroke-width:12px}.cls-4{stroke:#fff;stroke-width:6px}.cls-5{stroke-width:48px}.cls-6{stroke-width:24px}.cls-7{stroke-width:60px}.cls-8{stroke:#ffc413;stroke-width:3px;stroke-dasharray:12 12 12 12}.cls-9{clip-path:url(#clip-path)}.cls-10{clip-path:url(#clip-path-2)}.cls-11{fill:#535c68}</style> <clipPath id="clip-path"> <path class="cls-1" d="M2117.71 546.41c-2.59-9.77-5.4-19.75-10.83-28.38s-15.33-14.34-23.68-20c-4.51-3-8.69-6.56-13.23-9.56-2-1.35-6.41-2.88-7.18-5.24-1.07-3.29-2.13-9.69-5.18-12-2.11-1.61-3.46-1.11-3.44-4.2 0-4.63.23-9.29.39-13.92.21-5.32.2-3.55 4-5.65 2.45-1.33 3.49-9.75 4.38-12.41.61-1.85 1.17-4.72-.23-6.4-.49-.58-3.77-.8-3.62-.38-1.08-3 4.08-5.65 2.2-8.36-.1-.13-.25-5.5-.29-5.44 1.58-2.34-5-13.81-6.74-14.34-1.58-.51-3-2.39-4.31-3.51a12.77 12.77 0 0 0-6.45-2.76c-3.07-.61-6.66-3.75-10.33-1.76-.77.43-10.65-1-11 .94-.21 1.15-7.43 6.71-9.13 7.73-4.71 2.72-6.76 11-8.4 15.62-.89 2.44-.69 5.49-.55 8.09.1 2.28 3.86 8.77 3.59 9.86-.13.51-3.24-.7-3.7 1-.41 1.48.28 3.3.65 4.72.92 3.45 3.2 7.43 4.45 10.88 1.35 3.76 5.81 8.65 6.6 12.65 1.59 8.14-4.74 12.7-8.1 19.3-1.88 3.71-12.55 6-16.38 7.48-15.29 6-27 13-31 29.66-3.23 13.13-6.69 26.21-8.68 39.57-1.14 7.78-2.08 15.81-1.68 23.66.14 2.55-2.37 6.4-1.87 8.34 1.22 4.72 6 2 4.58 7.48-.53 2-3.26 6.16-2.83 7.84.3 1.22 1.46 1.88 2 3 .73 1.48-.09 3.37.47 5 1.93 5.65-4 11.06-1.77 17.42 1.26 3.65 4.18 10.16.09 13-3.9 2.67-4.86 6.56-3.12 10.88 1.28 3.12 3.3 2.19 5.27 3.85 3.92 3.28 3.36 13 6.62 17.18 1.94 2.46-.07 7.16.23 10.28.6 6.09-3.27 7.78-5.21 13-3.16 8.39-4.94 18.6-6.25 27.54-1.39 9.36-3.29 18.54-4.23 28-1.91 19.44-3.75 38-3.2 57.61.4 13.44-1.86 26.89-2.55 40.3-.56 11-1.35 20-2.85 31.08-1.37 10.12-4 22.63-1.14 32.71-.3-.05-.6-.09-.89-.15.35.64 3.88 4 3.58 4.71-.6 1.3-2.32 3.84-2.58 5.19-.7 3.46-6.62 8.3-9.5 9.83-4.48 2.39-11.81.13-14.34 4.77-.64 1.16-.84 7-2.27 7.31-1.73.32-2 4.52-2 5.94.11 4 31 5.88 35 5.7 2-.12 5 .9 7-.14.46-.25 5.06-4.06 5.07-4.06a42.78 42.78 0 0 1 4.18-5.66c1.3-1 8.68 7 10.7 2.93.42-.84 11.65-2.47 13.47-3.08 2.91-1-.44-10.84 1.13-13.12.73-1.06.65-4.6 1.43-6.27 1.34-2.93 2.65-5.88 4.11-8.76a19.16 19.16 0 0 1-6.17.38c8.16-.44 6.29-1.91 6.91-9.61q1.14-14.07 2.27-28.17c.4-5.07.58-10.21 1.23-15.24 1.27-6.47 3-13 3-19.62 0-5.07-1.16-10.11-1.08-15.15.15-8.93-.1-17.79-.1-26.69 0-3.59 1.86-6.13 3.2-9.42A143 143 0 0 0 2004 778c2.77-11.6 5.59-23.12 9.13-34.53.69-2.21 7.23-15.58 6.2-17.71 4.22 8.75.35 22.87 2.19 32.53a311.23 311.23 0 0 0 8.33 33.35c2.6 8.43 2 18.14 3.08 26.85a80.69 80.69 0 0 1-1.21 29 48.82 48.82 0 0 0-1.58 13.61c.14 2.37 1.88 5.86.47 7.8-4.44 6.23-7.36 14.81-10.06 21.93-1.81 4.75-4.31 7.07-8.32 10.44-4.84 4.09-2 11.8.74 16.23 1.25 2 7.39 16.52 9.57 14.91-1.1.81-1.59 13.68-1.5 15.36.19 4.09-1.81 7.06-1.36 11.41.27 2.47 15.28 2.61 17.55 1.83 3-1 11.53 1.89 14-.26s6.49.58 6.2-5.54c-.27-5.28-2.68-10.46-2.54-15.86 0 1 3.06-.11 3.53-1 1.24-2.41 2.85-4.42 4.19-6.79 4.05-7.13 6.18-11.29 3.6-19.34-2.47-7.64 1.19-16.24 3.51-23.69 1.29-4.16.79-9.36.67-13.7-.1-3.14-1-6.74-.08-9.85.83-2.73-1.34-7.46-.22-9.61.93-1.82-.54-4.15.27-6 1.26-2.79 1.06-5 1.42-7.85.55-4.4 1.59-8.73 2.28-13.11 2.91-18.62 5.33-37.41 6.64-56.2.65-9.19 2.33-18.34 2.89-27.53.16-2.52.88-15.68 3.73-16.85 6.48-2.76 3.32-10.82 5.58-15.36.22-.47 1.63.73 1.34 1.39-1 2.23-.75 5.08-1.49 7.47-1 3.19-1.39 6.69-3.41 9.49-6.78 9.37 6.95 5.57 10.44 1.63 4.82-5.44 10.75-7.1 12.82-14.29 1-3.37 2.64-6.71 2.54-10.28-.09-3.13-1-6.88-.23-9.62 1-3.49-.55-7.84 1.07-11.21 1.49-3 1.66-8.56 2-11.9.82-8.59 3.14-17 3.91-25.71a252.86 252.86 0 0 0 .11-37.83c-1.47-21.61 1.29-44.1-4.29-65.2z"/> </clipPath> <clipPath id="clip-path-2"> <path class="cls-2" d="M-149-1986h2512v6300H-149z"/> </clipPath> </defs> <title>workcell</title> <path class="cls-6 gantry__column" transform="translate(1555)" d="M112.21 82.39v864.94"/> <path class="cls-7 gantry__arm"d="M112.21 301.46v250.97" transform="translate(375, -110)"/> <path class="cls-3" d="M10.03 84.95H1747.6v862.9H10.03zM227.26 6.75H416.1v77.84H227.26zM588.84 6.75h188.84v77.84H588.84zM957.37 6.75h188.84v77.84H957.37zM1341.6 6.75h188.84v77.84H1341.6z"/> <path class="cls-4" d="M21.73 654.73h564.71v284.76H21.73zM216.27 456.51h87.28v109.2h-87.28zM446.36 482.48h140.8v83.23h-140.8zM765.75 524.09h55.35v41.61h-55.35zM828.18 552.55h55.35v13.16h-55.35zM1043.71 532.84h52.65v32.86h-52.65zM1103.48 532.84h52.65v32.86h-52.65zM1181.45 552.65h110.07v13.16h-110.07zM1198.05 526.33h78.24v26.21h-78.24zM891.17 482.48h108.58v83.23H891.17zM593.46 429.67h59.94V565.7h-59.94zM675.92 355.3h82.19v210.41h-82.19zM1443.04 175.49h139.27v390.22h-139.27zM1444.89 305.13h136.01M1444.89 236.79h136.01M1444.89 370.45h136.01M1444.89 436.77h136.01M1444.89 500.09h136.01M1595.7 305.13h138.2M1595.7 236.79h138.2M1595.7 370.45h138.2M1595.7 436.77h138.2M1595.7 500.09h138.2M1594.97 175.49h139.27v390.22h-139.27z"/> <path class="cls-3" d="M10.03 574.81h1737.62M310.7 334.65h705.89M316.44 334.06v241.35M663.15 334.06v241.35M1010.86 334.06v241.35"/> <path class="cls-5" d="M1037.34 417.87h270.69"/> <path class="cls-3" d="M1032.56 393.67v182M1171.24 400.86v174.81M1312.94 393.5v179.76"/> <path class="cls-4" d="M1238.48 365.07h61.42v26.21h-61.42zM1248.62 249.04V456.3M596.46 654.73h564.71v284.76H596.46zM1171.19 654.73h564.71v284.76h-564.71z"/> <path class="cls-8" d="M431.27 91.42v845.73M878.47 91.42v845.73M1325.67 91.42v845.73"/> <path class="cls-4" d="M439.68 248.31h94.24v77.84h-94.24zM541.58 248.31h94.24v77.84h-94.24zM643.49 248.31h94.24v77.84h-94.24zM745.39 248.31h94.24v77.84h-94.24zM848.97 193.94h151.36v77.84H848.97zM848.67 191.2v138.14M1000.42 191.2v138.14"/> <g class="cls-9"> <g class="cls-10"> <path class="cls-11" d="M1901.03 386.48h226.64v580.13h-226.64z"/> </g> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Workcell - Script Codes CSS Codes

body { background: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
svg { width: 800px; height: 500px;
}

Workcell - Script Codes JS Codes

"use strict";
var coords = [[1615, -60], [1555, -220], [1555, -150], [1555, -80], [1555, -10], [1555, 60], [1555, 130], [1400, -220], [1400, -150], [1400, -80], [1400, -10], [1400, 60], [1400, 130], [1500, 260], [900, 260], [350, 260], [1125, 160], [1015, 160], [960, 160], [830, 120], [740, 160], [680, 140], [605, 120], [510, 120], [420, 120], [147, 120], [820, -180], [820, -100], [680, -110], [580, -110], [475, -110], [375, -110]];
var arm = ".gantry__arm";
var gantry = ".gantry__column";
var currX = coords[0][0];
var currY = coords[0][1];
var currIndex = 0;
var timeScalar = 300;
var gantry_horz = new TimelineLite();
var gantry_vert = new TimelineLite();
gantry_horz.to(gantry, 0, { ease: Power2.easeInOut, attr: { transform: "translate(" + currX + ")" } });
gantry_vert.to(arm, 0, { ease: Power2.easeInOut, attr: { transform: "translate(" + currX + ", " + currY + ")" } });
dispatcher(currX, currY);
function dispatcher(xPrime, yPrime) { var xDelta = Math.abs(xPrime - currX); var yDelta = Math.abs(yPrime - currY); var delay = Math.random() * 2; var time = xDelta >= yDelta ? xDelta / timeScalar : yDelta / timeScalar; currX = coords[currIndex][0]; currY = coords[currIndex][1]; warpHorizontal(currX, time); warpVertical(currX, currY, time); setTimeout(function () { currIndex = Math.floor(Math.random() * coords.length); dispatcher(coords[currIndex][0], coords[currIndex][1]); }, (time + delay) * 1000);
}
function warpHorizontal(xPrime, time) { gantry_horz.to(gantry, time, { ease: Power2.easeInOut, attr: { transform: "translate(" + xPrime + ")" } });
}
function warpVertical(xPrime, yPrime, time) { gantry_vert.to(arm, time, { ease: Power2.easeInOut, attr: { transform: "translate(" + xPrime + ", " + yPrime + ")" } });
}
Workcell - Script Codes
Workcell - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 5,864 Kb
Views 22,264
Do you need developer help for Workcell?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexander Hadik (ahadik) Script Codes
Name
Transcriptic Node Graph
Pricing Table
Protocol Card
Basil Tree
Pricing Cards V3
Transcriptic Header
Geometric Header
Table Action
Ops Implementation
Loader
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!