Project Timeline

Developer

Size

9,790 Kb

Views

36,432

Project Timeline Previews
Project Timeline HTML Codes
Project Timeline CSS Codes
Project Timeline JS Codes

How do I make an project timeline?

A coworker of mine created this visual representation of a project timeline and when I saw it, I had to animate it. Using a little SVG, CSS, and JS made the job a breeze. Hitting the left and right arrows allows the user to see the progression of tasks through the allotted weeks.. What is a project timeline? How do you make a project timeline? This script and codes were developed by Paul Demers on 28 August 2022, Sunday.

Project Timeline Previews

Project Timeline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Project Timeline</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
#timeline { width: 100%; height: 100%;
}
.header { font-size: 26px; fill: #231F20;
}
.subhead { font-family: 'Nunito-Light'; font-size: 18px;
}
.weeks-line { fill: none; stroke: #999999; stroke-width: 2; stroke-miterlimit: 10;
}
.week-fill { fill: #fff; stroke: #A6A8AB; stroke-width: 2; stroke-miterlimit: 10;
}
.active .week-fill { fill: #999;
}
.week-number { fill: #999999;
}
.active .week-number { fill: #fff;
}
.phase-label { font-size: 22px;
}
.path { -webkit-transition: all 1s ease; transition: all 1s ease;
}
.template-path, .design-path, .arch-path, .research-path { stroke: #FFFFFF; stroke-width: 2;
}
.template-path { fill: #FCB64E;
}
.design-path { fill: #BFCA33;
}
.arch-path { fill: #70B2E2;
}
.research-path { fill: #4CB6AC;
}
.template-dot, .design-dot, .arch-dot, .research-dot, .journeys-dot { -webkit-transition: all .2s ease; transition: all .2s ease; stroke: #FFFFFF; stroke-width: 2;
}
.template-dot { fill: #FAA629;
}
.first-week .template-dot, .second-week .template-dot, .third-week .template-dot .fourth-week .template-dot, .fifth-week .template-dot, .sixth-week .template-dot, .seventh-week .template-dot, .eighth-week .template-dot, .ninth-week .template-dot, .tenth-week .template-dot, .eleventh-week .template-dot, .twelfth-week .template-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.twelfth-week .template-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.thirteenth-week .template-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.fourteenth-week .template-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.fifteenth-week .template-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.design-dot { fill: #AFB436;
}
.first-week .design-dot, .second-week .design-dot, .third-week .design-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.fourth-week .design-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.fifth-week .design-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.sixth-week .design-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.seventh-week .design-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.eighth-week .design-dot { -webkit-transform: translateX(320px); -ms-transform: translateX(320px); transform: translateX(320px);
}
.ninth-week .design-dot { -webkit-transform: translateX(384px); -ms-transform: translateX(384px); transform: translateX(384px);
}
.tenth-week .design-dot { -webkit-transform: translateX(448px); -ms-transform: translateX(448px); transform: translateX(448px);
}
.eleventh-week .design-dot { -webkit-transform: translateX(512px); -ms-transform: translateX(512px); transform: translateX(512px);
}
.twelfth-week .design-dot, .thirteenth-week .design-dot, .fourteenth-week .design-dot, .fifteenth-week .design-dot { -webkit-transform: translateX(576px); -ms-transform: translateX(576px); transform: translateX(576px);
}
.arch-dot { fill: #57A0D7;
}
.first-week .arch-dot, .second-week .arch-dot, .third-week .arch-dot, .fourth-week .arch-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.fifth-week .arch-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.sixth-week .arch-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.seventh-week .arch-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.eighth-week .arch-dot, .ninth-week .arch-dot, .tenth-week .arch-dot, .eleventh-week .arch-dot, .twelfth-week .arch-dot, .thirteenth-week .arch-dot, .fourteenth-week .arch-dot, .fifteenth-week .arch-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.research-dot { fill: #25A69A;
}
.first-week .research-dot, .second-week .research-dot, .third-week .research-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.third-week .research-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.fourth-week .research-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.fifth-week .research-dot, .sixth-week .research-dot, .seventh-week .research-dot, .eighth-week .research-dot, .ninth-week .research-dot, .tenth-week .research-dot, .eleventh-week .research-dot, .twelfth-week .research-dot, .thirteenth-week .research-dot, .fourteenth-week .research-dot, .fifteenth-week .research-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.journeys-dot { fill: #C694C3;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container first-week"> <svg x="0px" y="0px" viewBox="0 0 1152 540" id="timeline"> <line class="weeks-line" x1="127" y1="144.6" x2="1025.6" y2="144.6"/> <g class="week-wrapper"> <g class="week first active"> <path class="week-fill" d="M144,143.6c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S144,133.7,144,143.6z"/> <path class="week-number" d="M123.5,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 s0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.1-0.1,0.2-0.1s0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2s0.3,0.3,0.3,0.6v12.3c0,0.1,0,0.3-0.1,0.4 s-0.1,0.2-0.2,0.3s-0.2,0.1-0.3,0.2s-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0s-0.2-0.1-0.3-0.2s-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138 L123.5,139.4z"/> </g> <g class="week second"> <path class="week-fill" d="M208.3,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C200.2,125.6,208.3,133.7,208.3,143.6z"/> <path class="week-number" d="M190.3,137.4c-0.2,0-0.5,0-0.7,0.1s-0.5,0.1-0.7,0.2s-0.4,0.2-0.6,0.3s-0.4,0.2-0.5,0.3 c-0.2,0.1-0.4,0.2-0.5,0.2c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.4c0-0.1,0.1-0.3,0.2-0.4s0.3-0.3,0.5-0.4s0.4-0.3,0.7-0.4 s0.5-0.2,0.8-0.3s0.6-0.2,0.9-0.2s0.6-0.1,0.8-0.1c0.6,0,1.1,0.1,1.6,0.2s0.9,0.3,1.3,0.6s0.7,0.6,0.9,1s0.3,0.9,0.3,1.4 c0,0.5-0.1,1-0.3,1.6s-0.5,1.1-0.9,1.6s-0.8,1.1-1.3,1.6s-1,1.1-1.5,1.6s-1,1-1.6,1.6s-1,1-1.4,1.4h6.2c0.2,0,0.4,0.1,0.5,0.2 s0.2,0.3,0.2,0.5c0,0.2-0.1,0.3-0.2,0.5s-0.3,0.2-0.5,0.2h-7.1c-0.4,0-0.7-0.1-0.9-0.3s-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.2-0.6 s0.3-0.4,0.5-0.6c0.3-0.3,0.7-0.7,1.2-1.2s1-1,1.4-1.5s0.9-1,1.4-1.5s0.9-1,1.2-1.6s0.7-1,0.9-1.5s0.3-0.9,0.3-1.3 c0-0.3-0.1-0.6-0.2-0.9s-0.3-0.5-0.6-0.6s-0.5-0.3-0.8-0.4S190.6,137.4,190.3,137.4z"/> </g> <g class="week third"> <path class="week-fill" d="M272.5,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C264.4,125.6,272.5,133.7,272.5,143.6z"/> <path class="week-number" d="M253.9,142.3c0.4,0,0.8-0.1,1.2-0.2s0.7-0.2,1-0.4s0.5-0.5,0.7-0.8s0.3-0.7,0.3-1.1c0-0.4-0.1-0.7-0.2-1 s-0.4-0.5-0.6-0.7s-0.5-0.4-0.9-0.5s-0.7-0.2-1-0.2c-0.3,0-0.7,0-1,0.1s-0.6,0.1-0.9,0.2s-0.5,0.2-0.7,0.2s-0.4,0.1-0.4,0.1 c-0.2,0-0.4-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.3,0.1-0.4s0.2-0.2,0.3-0.3c0.5-0.2,1-0.4,1.5-0.5s1.1-0.2,1.7-0.2 c0.6,0,1.2,0.1,1.8,0.2s1,0.4,1.5,0.7s0.8,0.7,1,1.2s0.4,1,0.4,1.7c0,0.4-0.1,0.8-0.2,1.1s-0.3,0.6-0.6,0.9s-0.5,0.5-0.9,0.7 s-0.7,0.3-1,0.4v0c0.4,0.1,0.8,0.2,1.2,0.4s0.7,0.5,0.9,0.8s0.5,0.6,0.6,1s0.2,0.8,0.2,1.3c0,0.7-0.1,1.3-0.4,1.7s-0.6,0.9-1,1.2 s-0.9,0.5-1.5,0.7s-1.1,0.2-1.7,0.2c-0.2,0-0.5,0-0.7,0s-0.5-0.1-0.8-0.1s-0.6-0.1-0.8-0.2s-0.5-0.2-0.7-0.3s-0.4-0.2-0.5-0.4 s-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.5s0.3-0.2,0.5-0.2c0.1,0,0.2,0,0.2,0c0.2,0.1,0.3,0.1,0.6,0.2s0.4,0.1,0.7,0.2 s0.5,0.1,0.8,0.2s0.6,0.1,0.8,0.1c0.4,0,0.8-0.1,1.2-0.2s0.6-0.3,0.9-0.5s0.4-0.4,0.6-0.7s0.2-0.6,0.2-1c0-0.5-0.1-0.9-0.3-1.2 s-0.4-0.6-0.7-0.9s-0.6-0.4-1-0.5s-0.8-0.2-1.2-0.2h-0.7c-0.2,0-0.4-0.1-0.5-0.2s-0.2-0.3-0.2-0.5s0.1-0.3,0.2-0.5 s0.3-0.2,0.5-0.2L253.9,142.3z"/> </g> <g class="week fourth"> <g> <path class="week-fill" d="M336.8,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C328.7,125.6,336.8,133.7,336.8,143.6z"/> <path class="week-number" d="M319.1,136.9c0.2-0.3,0.4-0.5,0.6-0.6s0.5-0.2,0.8-0.2c0.2,0,0.3,0,0.5,0.1s0.3,0.1,0.4,0.2s0.2,0.2,0.3,0.4 s0.1,0.3,0.1,0.5v8.3h1.5c0.2,0,0.4,0.1,0.5,0.2s0.2,0.3,0.2,0.4s-0.1,0.3-0.2,0.4s-0.3,0.2-0.5,0.2h-1.5v2.3c0,0.1,0,0.2-0.1,0.3 s-0.1,0.2-0.2,0.2s-0.2,0.1-0.3,0.1s-0.2,0-0.3,0s-0.2,0-0.3,0s-0.2-0.1-0.3-0.1s-0.1-0.1-0.2-0.2s-0.1-0.2-0.1-0.3v-2.3h-5.6 c-0.3,0-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.6c0-0.1,0-0.2,0-0.3s0.1-0.2,0.1-0.3L319.1,136.9z M314.9,145.7h5.1v-8L314.9,145.7z"/> </g> </g> <g class="week fifth"> <path class="week-fill" d="M401,143.6c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S401,133.7,401,143.6z"/> <path class="week-number" d="M379.1,136.9c0-0.2,0.1-0.4,0.2-0.6s0.3-0.2,0.6-0.2h6.5c0.2,0,0.4,0.1,0.5,0.2s0.2,0.3,0.2,0.5 c0,0.2-0.1,0.3-0.2,0.5s-0.3,0.2-0.5,0.2h-6l0,4.9c0.4-0.4,0.9-0.8,1.4-1s1.1-0.4,1.7-0.4c0.6,0,1.2,0.1,1.7,0.4s1,0.6,1.3,1 s0.6,0.9,0.8,1.4s0.3,1.1,0.3,1.8c0,0.7-0.1,1.3-0.3,1.9s-0.5,1.1-0.9,1.5s-0.9,0.7-1.5,1s-1.2,0.4-1.9,0.4c-0.5,0-1,0-1.4-0.1 s-0.9-0.2-1.2-0.4s-0.7-0.5-1-0.8s-0.5-0.7-0.7-1.1c0-0.1-0.1-0.2-0.1-0.2s0-0.1,0-0.2c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.4-0.2 c0.1,0,0.2,0,0.4,0.1s0.2,0.2,0.3,0.4c0.1,0.3,0.3,0.6,0.5,0.8s0.4,0.4,0.7,0.5s0.5,0.3,0.8,0.3s0.6,0.1,1,0.1 c0.5,0,1-0.1,1.3-0.3s0.7-0.4,0.9-0.7s0.4-0.7,0.6-1.1s0.2-0.9,0.2-1.3c0-0.5-0.1-0.9-0.2-1.3s-0.3-0.7-0.5-1s-0.5-0.5-0.9-0.7 s-0.7-0.2-1.2-0.2c-0.4,0-0.7,0-1,0.1s-0.5,0.2-0.8,0.3s-0.4,0.3-0.6,0.4s-0.3,0.3-0.4,0.5c-0.1,0.2-0.2,0.3-0.4,0.4 s-0.3,0.1-0.5,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.6V136.9z"/> </g> <g class="week sixth"> <path class="week-fill" d="M465.3,143.6c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S465.3,133.7,465.3,143.6z"/> <path class="week-number" d="M451,136.7c0.1,0.1,0.2,0.1,0.2,0.2s0.1,0.2,0.1,0.3c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.1,0.2s-0.1,0.1-0.2,0.2 s-0.2,0.1-0.3,0.1c-0.1,0-0.1,0-0.2,0c-0.4-0.2-0.9-0.3-1.3-0.4s-0.8-0.1-1.1-0.1c-0.6,0-1.1,0.1-1.5,0.2s-0.8,0.4-1.1,0.7 s-0.5,0.6-0.7,1s-0.3,0.8-0.4,1.2s-0.2,0.8-0.2,1.3s-0.1,0.9-0.1,1.3c0.3-0.7,0.8-1.2,1.5-1.6s1.3-0.5,2.1-0.5 c0.7,0,1.3,0.1,1.8,0.3s1,0.5,1.4,0.9s0.6,0.9,0.8,1.4s0.3,1.2,0.3,1.9c0,0.8-0.1,1.4-0.3,2s-0.5,1-0.9,1.5s-0.9,0.7-1.4,1 s-1.2,0.4-1.9,0.4c-0.7,0-1.2-0.1-1.7-0.2s-0.9-0.4-1.3-0.7s-0.7-0.6-1-1s-0.5-0.8-0.6-1.3s-0.3-1-0.4-1.6s-0.1-1.2-0.1-1.8 c0-0.6,0-1.2,0.1-1.8s0.2-1.2,0.3-1.8s0.4-1.1,0.6-1.6s0.6-0.9,1-1.3s0.9-0.7,1.5-0.9s1.3-0.3,2.1-0.3c0.5,0,1.1,0.1,1.6,0.2 S450.6,136.5,451,136.7z M447.4,148.9c0.5,0,0.9-0.1,1.3-0.2s0.7-0.4,0.9-0.6s0.4-0.6,0.6-1s0.2-0.9,0.2-1.4 c0-0.5-0.1-0.9-0.2-1.3s-0.3-0.7-0.5-1s-0.5-0.5-0.9-0.7s-0.8-0.3-1.2-0.3c-0.5,0-1,0.1-1.4,0.3s-0.7,0.4-1,0.7s-0.5,0.7-0.6,1.1 s-0.2,0.9-0.2,1.4c0,0.5,0.1,1,0.2,1.3s0.4,0.7,0.6,1s0.6,0.5,0.9,0.7S447,148.9,447.4,148.9z"/> </g> <g class="week seventh"> <path class="week-fill" d="M529.5,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C521.4,125.6,529.5,133.7,529.5,143.6z"/> <path class="week-number" d="M510.8,149.6c-0.1,0.2-0.2,0.3-0.3,0.4s-0.3,0.1-0.4,0.1c-0.1,0-0.2,0-0.3-0.1s-0.2-0.1-0.3-0.2 s-0.2-0.2-0.2-0.3s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0.1-0.4l5-11.3h-6.6c-0.2,0-0.4-0.1-0.5-0.2s-0.2-0.3-0.2-0.5s0.1-0.3,0.2-0.5 s0.3-0.2,0.5-0.2h7.5c0.4,0,0.6,0.1,0.8,0.3s0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.7L510.8,149.6z"/> </g> <g class="week eighth"> <path class="week-fill" d="M593.8,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C585.7,125.6,593.8,133.7,593.8,143.6z"/> <path class="week-number" d="M573.9,142.8c-0.4,0-0.8-0.2-1.1-0.4s-0.6-0.5-0.9-0.7s-0.4-0.6-0.6-0.9s-0.2-0.7-0.2-1.1 c0-0.6,0.1-1.2,0.4-1.6s0.6-0.8,1-1.1s0.9-0.5,1.5-0.7s1.1-0.2,1.7-0.2c0.6,0,1.2,0.1,1.8,0.2c0.6,0.1,1.1,0.4,1.5,0.7 s0.8,0.7,1,1.1c0.3,0.5,0.4,1,0.4,1.6c0,0.4-0.1,0.8-0.2,1.1c-0.1,0.3-0.3,0.6-0.6,0.9s-0.5,0.5-0.9,0.7c-0.3,0.2-0.7,0.4-1.1,0.5 v0c0.9,0.3,1.7,0.7,2.2,1.3s0.8,1.3,0.8,2.2c0,0.6-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.9-1.1,1.2s-1,0.6-1.6,0.7 c-0.6,0.2-1.2,0.2-1.9,0.2s-1.3-0.1-1.9-0.2s-1.1-0.4-1.6-0.7s-0.8-0.7-1.1-1.2s-0.4-1.1-0.4-1.7c0-0.4,0.1-0.8,0.2-1.2 s0.3-0.7,0.6-1s0.6-0.6,0.9-0.8S573.4,143,573.9,142.8L573.9,142.8z M572.7,146.3c0,0.4,0.1,0.8,0.3,1.1s0.4,0.6,0.7,0.8 s0.6,0.4,1,0.5s0.8,0.2,1.2,0.2s0.8-0.1,1.2-0.2s0.7-0.3,1-0.5c0.3-0.2,0.5-0.5,0.7-0.8c0.2-0.3,0.3-0.7,0.3-1.1 c0-0.5-0.1-0.8-0.3-1.2c-0.2-0.3-0.4-0.6-0.7-0.8c-0.3-0.2-0.6-0.4-1-0.5s-0.8-0.2-1.2-0.2s-0.8,0.1-1.2,0.2s-0.7,0.3-1,0.5 s-0.5,0.5-0.7,0.8S572.7,145.8,572.7,146.3z M572.8,139.7c0,0.4,0.1,0.7,0.2,1s0.4,0.5,0.6,0.7s0.6,0.3,0.9,0.4s0.8,0.1,1.2,0.1 c0.4,0,0.8,0,1.2-0.1s0.7-0.2,0.9-0.4s0.5-0.4,0.6-0.7c0.2-0.3,0.2-0.6,0.2-1c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.4-0.6-0.7-0.7 s-0.6-0.3-1-0.4s-0.7-0.1-1.1-0.1s-0.7,0-1.1,0.1s-0.7,0.2-1,0.4s-0.5,0.4-0.7,0.7S572.8,139.2,572.8,139.7z"/> </g> <g class="week ninth"> <path class="week-fill" d="M658,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18C649.9,125.6,658,133.7,658,143.6z"/> <path class="week-number" d="M636.3,149.5c-0.1-0.1-0.2-0.1-0.2-0.2s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.2,0.1-0.3 s0.1-0.1,0.2-0.2s0.2-0.1,0.3-0.1c0.1,0,0.1,0,0.2,0c0.5,0.2,0.9,0.3,1.4,0.4s0.8,0.1,1.2,0.1c0.5,0,1-0.1,1.4-0.3s0.7-0.4,1-0.7 c0.3-0.3,0.5-0.6,0.7-1s0.3-0.8,0.4-1.3s0.2-0.9,0.2-1.3c0-0.4,0.1-0.8,0.1-1.3h0h0c-0.2,0.3-0.4,0.6-0.6,0.9 c-0.2,0.3-0.5,0.5-0.8,0.6c-0.3,0.2-0.6,0.3-1,0.4c-0.4,0.1-0.7,0.1-1.1,0.1c-0.7,0-1.3-0.1-1.8-0.3c-0.5-0.2-1-0.5-1.4-0.9 c-0.4-0.4-0.6-0.9-0.8-1.4c-0.2-0.5-0.3-1.1-0.3-1.8c0-0.7,0.1-1.3,0.3-1.8c0.2-0.6,0.5-1,0.9-1.5c0.4-0.4,0.9-0.7,1.4-1 c0.6-0.2,1.2-0.4,1.9-0.4c0.7,0,1.2,0.1,1.7,0.2s1,0.4,1.3,0.7s0.7,0.6,1,1c0.3,0.4,0.5,0.8,0.6,1.3c0.2,0.5,0.3,1,0.4,1.5 c0.1,0.5,0.1,1.1,0.1,1.6c0,0.6,0,1.2-0.1,1.8c-0.1,0.6-0.2,1.1-0.3,1.7s-0.4,1.2-0.6,1.7s-0.6,1-1,1.4s-0.9,0.7-1.5,0.9 c-0.6,0.2-1.3,0.3-2.1,0.3c-0.5,0-1.1-0.1-1.6-0.2S636.7,149.8,636.3,149.5z M639.9,137.4c-0.5,0-0.9,0.1-1.3,0.2 c-0.4,0.2-0.7,0.4-0.9,0.6c-0.2,0.3-0.4,0.6-0.6,1c-0.1,0.4-0.2,0.8-0.2,1.3c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,1 c0.2,0.3,0.5,0.5,0.8,0.7c0.3,0.2,0.8,0.3,1.2,0.3c0.5,0,1-0.1,1.4-0.3c0.4-0.2,0.7-0.4,1-0.7c0.3-0.3,0.5-0.7,0.6-1.1 s0.2-0.8,0.2-1.3c0-0.4-0.1-0.8-0.2-1.2s-0.3-0.7-0.6-1c-0.3-0.3-0.6-0.5-0.9-0.7S640.3,137.4,639.9,137.4z"/> </g> </g> <g class="week tenth"> <path class="week-fill" d="M722.3,143.6c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S722.3,133.7,722.3,143.6z"/> <path class="week-number" d="M696.8,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L696.8,139.4z"/> <path class="week-number" d="M709.3,136c0.6,0,1.2,0.1,1.7,0.3c0.5,0.2,0.9,0.4,1.3,0.8c0.4,0.3,0.7,0.7,0.9,1.2c0.2,0.4,0.4,0.9,0.6,1.4 c0.1,0.5,0.2,1.1,0.3,1.6s0.1,1.2,0.1,1.9c0,0.6,0,1.3-0.1,1.8s-0.2,1.1-0.3,1.6c-0.1,0.5-0.3,1-0.6,1.4c-0.2,0.4-0.5,0.8-0.9,1.2 c-0.4,0.3-0.8,0.6-1.3,0.8c-0.5,0.2-1,0.3-1.7,0.3s-1.2-0.1-1.7-0.3c-0.5-0.2-0.9-0.4-1.3-0.8c-0.4-0.3-0.7-0.7-0.9-1.2 c-0.2-0.4-0.4-0.9-0.6-1.4c-0.1-0.5-0.2-1.1-0.3-1.6s-0.1-1.2-0.1-1.8c0-0.7,0-1.3,0.1-1.9s0.2-1.1,0.3-1.6c0.1-0.5,0.3-1,0.6-1.4 c0.2-0.4,0.5-0.8,0.9-1.2c0.4-0.3,0.8-0.6,1.3-0.8S708.7,136,709.3,136z M709.3,137.4c-0.5,0-0.8,0.1-1.2,0.3s-0.6,0.4-0.8,0.7 c-0.2,0.3-0.4,0.6-0.5,1c-0.1,0.4-0.2,0.8-0.3,1.2s-0.1,0.8-0.1,1.2c0,0.4,0,0.9,0,1.3c0,0.4,0,0.8,0,1.3c0,0.4,0.1,0.8,0.1,1.3 s0.2,0.8,0.3,1.2c0.1,0.4,0.3,0.7,0.5,1c0.2,0.3,0.5,0.5,0.8,0.7c0.3,0.2,0.7,0.3,1.2,0.3c0.5,0,0.8-0.1,1.2-0.3 c0.3-0.2,0.6-0.4,0.8-0.7c0.2-0.3,0.4-0.6,0.5-1c0.1-0.4,0.2-0.8,0.3-1.2c0.1-0.4,0.1-0.8,0.1-1.3c0-0.4,0-0.8,0-1.3 c0-0.5,0-0.9,0-1.3c0-0.4-0.1-0.8-0.1-1.2c-0.1-0.4-0.2-0.8-0.3-1.2c-0.1-0.4-0.3-0.7-0.5-1c-0.2-0.3-0.5-0.5-0.8-0.7 C710.2,137.5,709.8,137.4,709.3,137.4z"/> </g> <g class="week eleventh"> <path class="week-fill" d="M786.5,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C778.4,125.6,786.5,133.7,786.5,143.6z"/> <path class="week-number" d="M761.4,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L761.4,139.4z"/> <path class="week-number" d="M770.7,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L770.7,139.4z"/> </g> <g class="week twelfth"> <path class="week-fill" d="M850.8,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C842.7,125.6,850.8,133.7,850.8,143.6z"/> <path class="week-number" d="M825,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L825,139.4z"/> <path class="week-number" d="M838.1,137.4c-0.2,0-0.5,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.2-0.6,0.3 c-0.2,0.1-0.4,0.2-0.5,0.3c-0.2,0.1-0.4,0.2-0.5,0.2c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-0.1,0.1-0.3,0.2-0.4 c0.1-0.1,0.3-0.3,0.5-0.4c0.2-0.1,0.4-0.3,0.7-0.4s0.5-0.2,0.8-0.3c0.3-0.1,0.6-0.2,0.9-0.2c0.3,0,0.6-0.1,0.8-0.1 c0.6,0,1.1,0.1,1.6,0.2s0.9,0.3,1.3,0.6c0.4,0.3,0.7,0.6,0.9,1s0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.6c-0.2,0.5-0.5,1.1-0.9,1.6 c-0.4,0.5-0.8,1.1-1.3,1.6c-0.5,0.6-1,1.1-1.5,1.6c-0.5,0.5-1,1-1.6,1.6s-1,1-1.4,1.4h6.2c0.2,0,0.4,0.1,0.5,0.2 c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.3-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2h-7.1c-0.4,0-0.7-0.1-0.9-0.3c-0.2-0.2-0.3-0.4-0.3-0.6 c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.3-0.4,0.5-0.6c0.3-0.3,0.7-0.7,1.2-1.2s1-1,1.4-1.5c0.5-0.5,0.9-1,1.4-1.5 c0.5-0.5,0.9-1,1.2-1.6c0.4-0.5,0.7-1,0.9-1.5s0.3-0.9,0.3-1.3c0-0.3-0.1-0.6-0.2-0.9c-0.1-0.2-0.3-0.5-0.6-0.6 c-0.2-0.2-0.5-0.3-0.8-0.4C838.7,137.5,838.4,137.4,838.1,137.4z"/> </g> <g class="week thirteenth"> <path class="week-fill" d="M915.1,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18C907,125.6,915.1,133.7,915.1,143.6z "/> <path class="week-number" d="M889.3,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L889.3,139.4z"/> <path class="week-number" d="M901.8,142.3c0.4,0,0.8-0.1,1.2-0.2s0.7-0.2,1-0.4c0.3-0.2,0.5-0.5,0.7-0.8c0.2-0.3,0.3-0.7,0.3-1.1 c0-0.4-0.1-0.7-0.2-1c-0.2-0.3-0.4-0.5-0.6-0.7c-0.3-0.2-0.5-0.4-0.9-0.5s-0.7-0.2-1-0.2c-0.3,0-0.7,0-1,0.1 c-0.3,0.1-0.6,0.1-0.9,0.2s-0.5,0.2-0.7,0.2c-0.2,0.1-0.4,0.1-0.4,0.1c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.2-0.2-0.3-0.2-0.5 c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.2-0.2,0.3-0.3c0.5-0.2,1-0.4,1.5-0.5c0.5-0.1,1.1-0.2,1.7-0.2c0.6,0,1.2,0.1,1.8,0.2 s1,0.4,1.5,0.7c0.4,0.3,0.8,0.7,1,1.2c0.2,0.5,0.4,1,0.4,1.7c0,0.4-0.1,0.8-0.2,1.1c-0.1,0.3-0.3,0.6-0.6,0.9s-0.5,0.5-0.9,0.7 c-0.3,0.2-0.7,0.3-1,0.4v0c0.4,0.1,0.8,0.2,1.2,0.4c0.4,0.2,0.7,0.5,0.9,0.8c0.3,0.3,0.5,0.6,0.6,1c0.1,0.4,0.2,0.8,0.2,1.3 c0,0.7-0.1,1.3-0.4,1.7c-0.3,0.5-0.6,0.9-1,1.2s-0.9,0.5-1.5,0.7s-1.1,0.2-1.7,0.2c-0.2,0-0.5,0-0.7,0c-0.3,0-0.5-0.1-0.8-0.1 s-0.6-0.1-0.8-0.2c-0.3-0.1-0.5-0.2-0.7-0.3c-0.2-0.1-0.4-0.2-0.5-0.4c-0.1-0.1-0.2-0.3-0.2-0.4c0-0.2,0.1-0.3,0.2-0.5 c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.2,0,0.2,0c0.2,0.1,0.3,0.1,0.6,0.2c0.2,0.1,0.4,0.1,0.7,0.2c0.2,0.1,0.5,0.1,0.8,0.2 s0.6,0.1,0.8,0.1c0.4,0,0.8-0.1,1.2-0.2s0.6-0.3,0.9-0.5s0.4-0.4,0.6-0.7c0.1-0.3,0.2-0.6,0.2-1c0-0.5-0.1-0.9-0.3-1.2 c-0.2-0.3-0.4-0.6-0.7-0.9c-0.3-0.2-0.6-0.4-1-0.5c-0.4-0.1-0.8-0.2-1.2-0.2h-0.7c-0.2,0-0.4-0.1-0.5-0.2 c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.3,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2L901.8,142.3z"/> </g> <g class="week fourteenth"> <path class="week-fill" d="M979.3,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C971.2,125.6,979.3,133.7,979.3,143.6z"/> <path class="week-number" d="M953.6,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L953.6,139.4z"/> <path class="week-number" d="M966.9,136.9c0.2-0.3,0.4-0.5,0.6-0.6c0.2-0.1,0.5-0.2,0.8-0.2c0.2,0,0.3,0,0.5,0.1s0.3,0.1,0.4,0.2 c0.1,0.1,0.2,0.2,0.3,0.4c0.1,0.2,0.1,0.3,0.1,0.5v8.3h1.5c0.2,0,0.4,0.1,0.5,0.2s0.2,0.3,0.2,0.4s-0.1,0.3-0.2,0.4 s-0.3,0.2-0.5,0.2h-1.5v2.3c0,0.1,0,0.2-0.1,0.3s-0.1,0.2-0.2,0.2s-0.2,0.1-0.3,0.1s-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0 c-0.1,0-0.2-0.1-0.3-0.1s-0.1-0.1-0.2-0.2c-0.1-0.1-0.1-0.2-0.1-0.3v-2.3h-5.6c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.6 c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.2,0.1-0.3L966.9,136.9z M962.7,145.7h5.1v-8L962.7,145.7z"/> </g> <g class="week fifteenth"> <path class="week-fill" d="M1043.6,143.6c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C1035.5,125.6,1043.6,133.7,1043.6,143.6z"/> <path class="week-number" d="M1017.8,139.4c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.5c0-0.1,0-0.2,0.1-0.3 c0-0.1,0.1-0.2,0.2-0.2l3.3-2.1c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.3,0.3,0.6v12.3 c0,0.1,0,0.3-0.1,0.4s-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2-0.1-0.3-0.2 c-0.1-0.1-0.1-0.2-0.2-0.3s-0.1-0.2-0.1-0.4V138L1017.8,139.4z"/> <path class="week-number" d="M1026.9,136.9c0-0.2,0.1-0.4,0.2-0.6c0.1-0.1,0.3-0.2,0.6-0.2h6.5c0.2,0,0.4,0.1,0.5,0.2 c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.3-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2h-6l0,4.9c0.4-0.4,0.9-0.8,1.4-1 c0.5-0.2,1.1-0.4,1.7-0.4c0.6,0,1.2,0.1,1.7,0.4c0.5,0.2,1,0.6,1.3,1c0.4,0.4,0.6,0.9,0.8,1.4c0.2,0.5,0.3,1.1,0.3,1.8 c0,0.7-0.1,1.3-0.3,1.9s-0.5,1.1-0.9,1.5c-0.4,0.4-0.9,0.7-1.5,1c-0.6,0.2-1.2,0.4-1.9,0.4c-0.5,0-1,0-1.4-0.1 c-0.5-0.1-0.9-0.2-1.2-0.4c-0.4-0.2-0.7-0.5-1-0.8s-0.5-0.7-0.7-1.1c0-0.1-0.1-0.2-0.1-0.2s0-0.1,0-0.2c0-0.2,0.1-0.4,0.2-0.5 c0.1-0.1,0.3-0.2,0.4-0.2c0.1,0,0.2,0,0.4,0.1c0.1,0.1,0.2,0.2,0.3,0.4c0.1,0.3,0.3,0.6,0.5,0.8c0.2,0.2,0.4,0.4,0.7,0.5 c0.3,0.1,0.5,0.3,0.8,0.3c0.3,0.1,0.6,0.1,1,0.1c0.5,0,1-0.1,1.3-0.3s0.7-0.4,0.9-0.7c0.3-0.3,0.4-0.7,0.6-1.1 c0.1-0.4,0.2-0.9,0.2-1.3c0-0.5-0.1-0.9-0.2-1.3c-0.1-0.4-0.3-0.7-0.5-1s-0.5-0.5-0.9-0.7c-0.3-0.2-0.7-0.2-1.2-0.2 c-0.4,0-0.7,0-1,0.1s-0.5,0.2-0.8,0.3c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.2-0.3,0.3-0.4,0.5c-0.1,0.2-0.2,0.3-0.4,0.4 s-0.3,0.1-0.5,0.1c-0.2,0-0.3-0.1-0.5-0.2s-0.2-0.3-0.2-0.6V136.9z"/> </g> </g> <path class="template-path path" d="M865.1,417h-96.5c-9.9,0-18,8.1-18,18c0,9.9,8.1,18,18,18h96.4h160.6c9.9,0,18-8.1,18-18 c0-9.9-8.1-18-18-18H865.1z"/> <path class="template-dot" d="M786.5,435c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S786.5,425.1,786.5,435z"/> <path class="design-path path" d="M351.1,363h-96.5c-9.9,0-18,8.1-18,18c0,9.9,8.1,18,18,18h96.4h481.9c9.9,0,18-8.1,18-18c0-9.9-8.1-18-18-18 H351.1z"/> <path class="design-dot" d="M272.5,381c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S272.5,371.1,272.5,381z"/> <path class="arch-path path" d="M415.3,309h-96.5c-9.9,0-18,8.1-18,18c0,9.9,8.1,18,18,18h96.4h160.6c9.9,0,18-8.1,18-18 c0-9.9-8.1-18-18-18H415.3z"/> <path class="arch-dot" d="M336.8,327c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18 C328.7,309,336.8,317.1,336.8,327z"/> <path class="research-path path" d="M381.3,255h-96.2h-96.5c-9.9,0-18,8.1-18,18c0,9.9,8.1,18,18,18H285h96.4c9.9,0,18-8.1,18-18 C399.3,263.1,391.2,255,381.3,255"/> <path class="research-dot" d="M206.6,273c0,9.9-8.1,18-18,18c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18C198.5,255,206.6,263.1,206.6,273z"/> <path class="journeys-dot" d="M144,219c0,9.9-8.1,18-18,18s-18-8.1-18-18c0-9.9,8.1-18,18-18S144,209.1,144,219z"/> <text transform="matrix(1 0 0 1 484.6912 442.4138)"><tspan x="0" y="0" class="phase-label">TEMPLATES (5 WEEKS)</tspan></text> <text transform="matrix(1 0 0 1 319.4733 388.414)"><tspan x="0" y="0" class="phase-label">VISUAL DESIGN &amp; BRANDING (9 WEEKS)</tspan></text> <text transform="matrix(1 0 0 1 608.9992 334.4138)"><tspan x="0" y="0" class="phase-label">SITE ARCHITECTURE (5 WEEKS)</tspan></text> <text transform="matrix(1 0 0 1 414 280.4138)"><tspan x="0" y="0" class="phase-label">USER RESEARCH (4 WEEKS)</tspan></text> <text transform="matrix(1 0 0 1 156.9969 226.414)"><tspan x="0" y="0" class="phase-label">USER JOURNEYS (1 WEEK)</tspan></text> <text transform="matrix(1 0 0 1 500.902 101.6441)" class="subhead">15 WEEKS TOTAL</text> <text transform="matrix(1 0 0 1 416.5598 72.6458)" class="header">Project Phases &amp; Timeline</text> </svg> </div> <div> <hr> <p style="text-align: center;">Press the ◀ left and right ▶ arrow to step through each week.</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Project Timeline - Script Codes CSS Codes

* { box-sizing: border-box;
}
#timeline { width: 100%; height: 100%;
}
.header { font-size: 26px; fill: #231F20;
}
.subhead { font-family: 'Nunito-Light'; font-size: 18px;
}
.weeks-line { fill: none; stroke: #999999; stroke-width: 2; stroke-miterlimit: 10;
}
.week-fill { fill: #fff; stroke: #A6A8AB; stroke-width: 2; stroke-miterlimit: 10;
}
.active .week-fill { fill: #999;
}
.week-number { fill: #999999;
}
.active .week-number { fill: #fff;
}
.phase-label { font-size: 22px;
}
.path { -webkit-transition: all 1s ease; transition: all 1s ease;
}
.template-path, .design-path, .arch-path, .research-path { stroke: #FFFFFF; stroke-width: 2;
}
.template-path { fill: #FCB64E;
}
.design-path { fill: #BFCA33;
}
.arch-path { fill: #70B2E2;
}
.research-path { fill: #4CB6AC;
}
.template-dot, .design-dot, .arch-dot, .research-dot, .journeys-dot { -webkit-transition: all .2s ease; transition: all .2s ease; stroke: #FFFFFF; stroke-width: 2;
}
.template-dot { fill: #FAA629;
}
.first-week .template-dot, .second-week .template-dot, .third-week .template-dot .fourth-week .template-dot, .fifth-week .template-dot, .sixth-week .template-dot, .seventh-week .template-dot, .eighth-week .template-dot, .ninth-week .template-dot, .tenth-week .template-dot, .eleventh-week .template-dot, .twelfth-week .template-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.twelfth-week .template-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.thirteenth-week .template-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.fourteenth-week .template-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.fifteenth-week .template-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.design-dot { fill: #AFB436;
}
.first-week .design-dot, .second-week .design-dot, .third-week .design-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.fourth-week .design-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.fifth-week .design-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.sixth-week .design-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.seventh-week .design-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.eighth-week .design-dot { -webkit-transform: translateX(320px); -ms-transform: translateX(320px); transform: translateX(320px);
}
.ninth-week .design-dot { -webkit-transform: translateX(384px); -ms-transform: translateX(384px); transform: translateX(384px);
}
.tenth-week .design-dot { -webkit-transform: translateX(448px); -ms-transform: translateX(448px); transform: translateX(448px);
}
.eleventh-week .design-dot { -webkit-transform: translateX(512px); -ms-transform: translateX(512px); transform: translateX(512px);
}
.twelfth-week .design-dot, .thirteenth-week .design-dot, .fourteenth-week .design-dot, .fifteenth-week .design-dot { -webkit-transform: translateX(576px); -ms-transform: translateX(576px); transform: translateX(576px);
}
.arch-dot { fill: #57A0D7;
}
.first-week .arch-dot, .second-week .arch-dot, .third-week .arch-dot, .fourth-week .arch-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.fifth-week .arch-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.sixth-week .arch-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.seventh-week .arch-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.eighth-week .arch-dot, .ninth-week .arch-dot, .tenth-week .arch-dot, .eleventh-week .arch-dot, .twelfth-week .arch-dot, .thirteenth-week .arch-dot, .fourteenth-week .arch-dot, .fifteenth-week .arch-dot { -webkit-transform: translateX(256px); -ms-transform: translateX(256px); transform: translateX(256px);
}
.research-dot { fill: #25A69A;
}
.first-week .research-dot, .second-week .research-dot, .third-week .research-dot { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.third-week .research-dot { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px);
}
.fourth-week .research-dot { -webkit-transform: translateX(128px); -ms-transform: translateX(128px); transform: translateX(128px);
}
.fifth-week .research-dot, .sixth-week .research-dot, .seventh-week .research-dot, .eighth-week .research-dot, .ninth-week .research-dot, .tenth-week .research-dot, .eleventh-week .research-dot, .twelfth-week .research-dot, .thirteenth-week .research-dot, .fourteenth-week .research-dot, .fifteenth-week .research-dot { -webkit-transform: translateX(192px); -ms-transform: translateX(192px); transform: translateX(192px);
}
.journeys-dot { fill: #C694C3;
}

Project Timeline - Script Codes JS Codes

$(function(){ var IncrementWeek = { weeks: [ "first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth", "eleventh", "twelfth", "thirteenth", "fourteenth", "fifteenth" ], weekCount: 0, totalWeeks: 14, nextWeek: function() { if(this.weekCount <= this.totalWeeks-1){ this.weekCount++; console.log(this.weeks[this.weekCount], this.weekCount); return this.weeks[this.weekCount]; } }, prevWeek: function() { if(this.weekCount != 0){ this.weekCount--; console.log(this.weeks[this.weekCount], this.weekCount); return this.weeks[this.weekCount]; } }, forwardWeek: function() { return this.weeks[this.weekCount+1]; }, backWeek: function() { return this.weeks[this.weekCount-1]; } } $(document).keyup(function(e) { e.preventDefault(); var container = $('.container'); var weeks = document.getElementsByClassName('week'); var forwardWeek = document.getElementsByClassName(IncrementWeek.forwardWeek()); var backWeek = document.getElementsByClassName(IncrementWeek.backWeek()); if(e.keyCode == 39 && IncrementWeek.weekCount != 14) { //remove any active classes $(weeks).attr('class', function(idx, classes) { return classes.replace('active', ''); }); //apply an active class to the next item $(forwardWeek).not('.first').attr('class', function(idx, classes) { return classes + ' active'; }); container.removeClass().addClass('container ' + IncrementWeek.nextWeek() + '-week'); } if(e.keyCode == 37 && IncrementWeek.weekCount != 0){ //remove any active classes $(weeks).attr('class', function(idx, classes) { return classes.replace('active', ''); }); //apply an active class on the previous item $(backWeek).not('.fifteenth').attr('class', function(idx, classes) { return classes + ' active'; }); container.removeClass().addClass('container ' + IncrementWeek.prevWeek() + '-week').addClass('reverse'); } }); $('.animate').click(function() { //$('.container').addClass('animated'); });
});

Home Page	Home
Developer	Paul Demers
Username	demersdesigns
Uploaded	August 28, 2022
Rating	3
Size	9,790 Kb
Views	36,432

Do you need developer help for Project Timeline?

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!

Paul Demers (demersdesigns) Script Codes

Name	Size
Populate Login with User Avatar	3,324 Kb
Fancy Select Demo	5,306 Kb
Project Timeline Visualization	10,115 Kb
Fancy Radios, Checkboxes, and Selects	6,801 Kb
Default Input, Textareas, Submits, and Buttons in iOS	2,334 Kb
Fullscreen Overlay	5,310 Kb
CSS3 Filters Exploration	3,308 Kb
Animated Gradient Text Backgrounds	2,927 Kb
Icon Fonts and CSS3 Animations	3,288 Kb
Sticky Header Fade In On Scroll	4,057 Kb

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!

Similar Scripts & Codes

Name	Username	Size
3d css cube	Semenchenko	4,578 Kb
A Pen by Ash	Littleginger	2,386 Kb
P1	Vivi_Lai	1,533 Kb
Default Input, Textareas, Submits, and Buttons in iOS	Demersdesigns	2,334 Kb
Light Switch	Bartuc	4,933 Kb
Highbrow Basic HTML Lesson 7	Kimlarocca	1,662 Kb
IE11 Test	Boostnewmedia	4,998 Kb
DFF Website	Hawcubite	10,123 Kb
To Do List with Delete	Mattlbrody	2,068 Kb
Voting App - register	MatheusLima92	1,948 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!