Voting is our Voice
How do I make an voting is our voice?
What is a voting is our voice? How do you make a voting is our voice? This script and codes were developed by Chris Coyier on 30 December 2022, Friday.
Voting is our Voice - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Voting is our Voice</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg viewBox="0 0 245.4 170.24" id="svg" class="squiggle-it"> <g class="all-drawing" clip-path="url(#star)"> <g class="bars"> <rect x="0" y="0" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="14.4%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="14.4%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="29.8%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="45.2%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="60.6%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="76.0%" width="100%" height="7.7%" fill="#D83552"></rect> <rect x="0" y="91.5%" width="100%" height="7.7%" fill="#D83552"></rect> </g> <g class="voting"> <path d="M1.56,3.93A653.41,653.41,0,0,0,31.74,67.81c2-7.12,2.66-14.57,3.26-22l3.6-44.18" /> <path d="M52.71,32.32c-1.58.19-2.76,1.51-3.7,2.8-3.74,5.13-6.2,11.46-5.52,17.77s5,12.41,11.17,14c3.26,0.82,6.7.36,10-.37,4.54-1,9.35-2.84,11.64-6.89a12.14,12.14,0,0,0,.78-9.25,23.67,23.67,0,0,0-4.66-8.24A45.8,45.8,0,0,0,62,32.78" /> <path d="M97.71,59.73A588.32,588.32,0,0,1,79.65,1.47" /> <path d="M69.55,28.51a251.65,251.65,0,0,0,36.85-4.63" /> <path d="M117.51,25.2a284.1,284.1,0,0,1,12.55,32.24" /> <path d="M114.89,14.37 l1,1" /> <path d="M134.32,22.55q8,15.73,16.24,31.36" /> <path d="M140.48,33A51.42,51.42,0,0,1,140,20.12a2.53,2.53,0,0,1,.48-1.52c0.68-.76,1.91-0.46,2.86-0.1a148.09,148.09,0,0,1,29.07,14.93c5.56,3.69,11,7.89,14.47,13.59" /> <path d="M189.23,9a85.82,85.82,0,0,0-15.64,7.16,8.92,8.92,0,0,0-3.44,3c-1.85,3.2.67,7.29,3.76,9.31a19.78,19.78,0,0,0,16,2.09,28.11,28.11,0,0,0,13.58-9.21,8.15,8.15,0,0,0,2.05-3.76,3.28,3.28,0,0,0-1.74-3.61c-1.07-.41-2.26,0-3.41,0s-2.55-.61-2.51-1.76a71.34,71.34,0,0,1,20.86,13c2.62,2.35,5.13,5,6.45,8.25,2,4.86,1,10.43-.71,15.38s-4.91,10.19-10,11.68c-2.64.77-5.45,0.45-8.18,0.23a103.82,103.82,0,0,0-18.07.13,23,23,0,0,1-6.1.09c-6.81-1.19-10.5-8.43-13.16-14.81" /> </g> <g class="voice"> <path d="M4.38,110.93l37.41,60.78a112.93,112.93,0,0,0-1.27-13.58,227.1,227.1,0,0,1,.79-61.68" /> <path d="M52.47,127a49,49,0,0,0-6,15.77,16.89,16.89,0,0,0-.18,7c1.13,4.87,5.58,8.17,9.87,10.74,5,3,10.22,5.64,15.89,6.82s11.84,0.76,16.87-2.1a19,19,0,0,0,3.48-30.44c-7.15-6.6-17.94-6.75-27.66-6.52" /> <path d="M106.19,124.33q9.23,17.41,17.38,35.36" /> <path d="M105.87,106 l1,1" /> <path d="M158.52,119.77c-5.38,2.37-10.8,4.86-15.29,8.65s-8,9.09-8.42,15a5.39,5.39,0,0,0,.44,2.94c0.78,1.45,2.52,2.06,4.11,2.5a86.19,86.19,0,0,0,41.74,1" /> <path d="M194.26,132.46a79.77,79.77,0,0,0,26-6.93,14,14,0,0,0,5.52-3.83c1.37-1.8,1.83-4.49.47-6.31-1.48-2-4.34-2.17-6.82-2.05a71.32,71.32,0,0,0-32.15,9.52,7,7,0,0,0-2.37,1.91c-1.64,2.38,0,5.62,1.9,7.79,7,8,17.84,11.86,28.46,12.66s21.23-1.15,31.7-3.09" /> </g> <g class="is-our"> <path d="M78.59,87.25L79,92" /> <path d="M79,77.38 l1,1" /> <path d="M96.34,82.71A13,13,0,0,0,87,87.25a1.25,1.25,0,0,0-.36.71,1,1,0,0,0,.62.87c1.27,0.69,2.81,0,4.2-.37s3.34-.17,3.67,1.24S94,92.07,92.76,92.64s-2.55,1.08-3.86,1.52" /> <path d="M113.69,80.44l-1.6,4.33a1.34,1.34,0,0,0,.68,2,8.47,8.47,0,0,0,3.08,1.38,2.89,2.89,0,0,0,3-1.2,3.18,3.18,0,0,0-.12-2.87,6.11,6.11,0,0,0-4.32-3.32" /> <path d="M122.12,80.81a15.36,15.36,0,0,0,4.19,6.76c0.87,0.81,2.22,1.54,3.17.83a2.7,2.7,0,0,0,.71-2.38,24.45,24.45,0,0,0-1.52-7.27" /> <path d="M137.82,85.23a18.53,18.53,0,0,1-4.38-10.57" /> <path d="M134.64,76.92a13.08,13.08,0,0,1,10-3.28" /> </g> </g> <defs> <filter id="squiggly-0"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/> <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" /> </filter> <filter id="squiggly-1"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> </filter> <filter id="squiggly-2"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" /> </filter> <filter id="squiggly-3"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> </filter> <filter id="squiggly-4"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" /> </filter> <clipPath id="star"> <polygon points="116.71 32.72 133.6 66.95 171.38 72.43 144.04 99.08 150.5 136.7 116.71 118.94 82.92 136.7 89.38 99.08 62.04 72.43 99.82 66.95 116.71 32.72" fill="none" stroke="#000" stroke-miterlimit="10"/> </clipPath> </defs>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Voting is our Voice - Script Codes CSS Codes
.is-our path { opacity: 0;
}
rect { width: 0; fill: pink;
}
path { fill: none; stroke: #0C1C49; stroke-linecap: round; stroke-width: 2.5px;
}
@-webkit-keyframes squiggly-anim { 0% { -webkit-filter: url('#squiggly-0'); filter: url('#squiggly-0'); } 25% { -webkit-filter: url('#squiggly-1'); filter: url('#squiggly-1'); } 50% { -webkit-filter: url('#squiggly-2'); filter: url('#squiggly-2'); } 75% { -webkit-filter: url('#squiggly-3'); filter: url('#squiggly-3'); } 100% { -webkit-filter: url('#squiggly-4'); filter: url('#squiggly-4'); }
}
@keyframes squiggly-anim { 0% { -webkit-filter: url('#squiggly-0'); filter: url('#squiggly-0'); } 25% { -webkit-filter: url('#squiggly-1'); filter: url('#squiggly-1'); } 50% { -webkit-filter: url('#squiggly-2'); filter: url('#squiggly-2'); } 75% { -webkit-filter: url('#squiggly-3'); filter: url('#squiggly-3'); } 100% { -webkit-filter: url('#squiggly-4'); filter: url('#squiggly-4'); }
}
.squiggle-it { -webkit-animation: squiggly-anim 0.3s infinite; animation: squiggly-anim 0.3s infinite;
}
Voting is our Voice - Script Codes JS Codes
var svg = document.querySelector("#svg");
var bars = document.querySelectorAll(".bars rect");
var voting = document.querySelectorAll(".voting path");
var isOur = document.querySelectorAll(".is-our path");
var voice = document.querySelectorAll(".voice path");
var star = document.querySelector("#star polygon");
var tl = new TimelineMax({ repeat: -1, repeatDelay: 0.5
});
tl .staggerTo( bars, 1, { width: "100%", fill: "#D83552" }, 0.1 ) .staggerFromTo( voting, 1, { drawSVG:"0%" }, { drawSVG:"100%" }, 0.1, "-= 0.7" ) .staggerTo( isOur, 1, { opacity: 1, }, 0.15, "-= 0.4" ) .staggerFromTo( voice, 1, { drawSVG:"0%" }, { drawSVG:"100%" }, 0.1, "-= 1.2" ) .fromTo( star, 1, { scale: 6, transformOrigin: "center center" }, { scale: 0, transformOrigin:"center center" }, "+= 2" );
Developer | Chris Coyier |
Username | chriscoyier |
Uploaded | December 30, 2022 |
Rating | 4 |
Size | 3,883 Kb |
Views | 16,192 |
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!
Name | Size |
Complex Text Shadow Examples | 2,988 Kb |
Starting a React-Powered Comment Form | 5,450 Kb |
256 Classes Overrides One ID | 2,892 Kb |
Automatic Table of Contents | 2,869 Kb |
Transformer Tabs | 5,160 Kb |
Row and Column Highlighting with CSS Only | 2,180 Kb |
SVG Filters on HTML5 Video | 2,764 Kb |
Three-Line Menu Icon, Various Techniques | 3,015 Kb |
Airtable Emoji Poll | 3,194 Kb |
Smooth Page Scrolling in jQuery | 2,813 Kb |
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!
Name | Username | Size |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
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!