MFA iteration example

Developer
Andy Hullinger
Size
7,065 Kb
Views
34,408
  1. MFA iteration example Previews
  2. MFA iteration example HTML Codes
  3. MFA iteration example CSS Codes
  4. MFA iteration example JS Codes

How do I make an mfa iteration example?

Pseudo code to demonstrate a loop algorithm. What is a mfa iteration example? How do you make a mfa iteration example? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

MFA iteration example Previews
IQ Test

MFA iteration example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MFA iteration example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.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! */ @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,700);
em{font-style: normal;color:#EC2D6C;}
i{color:#A784CB;}
html,body{height: 100%;}
body{display: flex; justify-content:space-between; background-color: #1b2d3d; align-items:center;
}
svg, img{width:200px}
div{ color:#f0f5f1; margin-top: 50px; position: relative; font-size: 20px; line-height: 2; font-family:'Source Code Pro'; white-space: nowrap; padding: 0 20px;
}
input{width: 100%;display: block;}
span{ border:1px solid maroon; border-radius:8px; background-color: #EC2D6C; padding: 10px; padding-right: 0;
}
*{padding: 0;margin: 0;box-sizing:border-box;}
output{font-weight: 700;color:#9AA92F;}
select { -webkit-appearance: none; font-family: 'Source Code Pro'; font-size: 20px; color:#f0f5f1; padding-left: 5px; border:none; background-color: transparent; outline:none;
}
strong{ color:#95E693;
}
/*coda colors
white : #f0f5f1
red : #d54b67
yellow: #f5cc93
green: #92e790 (8eed81)
blue: #97d9e1
purple: #8375b8
background: #1b2d3d*/
div{margin-top: 50px;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/mona.svg" alt="" />
<div> <code> <em>while</em> (<i>outputPix <em> < </em> inputPix</i>) <em>do</em> <br/> <!-- <input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">--> &nbsp;&nbsp;&nbsp;<i>nextPix<strong>.color </strong></i><em>=</em> <span> <select onchange="convertImage();"> <option>greyscale</option> <option>sepiatone</option> <option>saturated</option> <option>random</option>
</select> <b class="fa fa-chevron-down"></b> </span> <br/> <em>end</em><br/>
</code>
</div>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 256 384">
<rect fill="#7F7D57" width="15" height="14"/>
<rect x="17" fill="#7A7850" width="14" height="14"/>
<rect x="33" fill="#807B4F" width="14" height="14"/>
<rect x="49" fill="#888155" width="14" height="14"/>
<rect x="65" fill="#918C5F" width="14" height="14"/>
<rect x="81" fill="#94905B" width="14" height="14"/>
<rect x="97" fill="#918F60" width="14" height="14"/>
<rect x="113" fill="#959467" width="14" height="14"/>
<rect x="129" fill="#9A996D" width="14" height="14"/>
<rect x="145" fill="#A29F75" width="14" height="14"/>
<rect x="161" fill="#ADA371" width="14" height="14"/>
<rect x="177" fill="#AFAA79" width="14" height="14"/>
<rect x="193" fill="#B0AC78" width="14" height="14"/>
<rect x="209" fill="#B2A778" width="14" height="14"/>
<rect x="225" fill="#B5AA77" width="14" height="14"/>
<rect x="241" fill="#B7AE76" width="15" height="14"/>
<rect y="16" fill="#8D885B" width="15" height="14"/>
<rect x="17" y="16" fill="#8B8559" width="14" height="14"/>
<rect x="33" y="16" fill="#8D885A" width="14" height="14"/>
<rect x="49" y="16" fill="#928860" width="14" height="14"/>
<rect x="65" y="16" fill="#9A9162" width="14" height="14"/>
<rect x="81" y="16" fill="#9C9362" width="14" height="14"/>
<rect x="97" y="16" fill="#A29E70" width="14" height="14"/>
<rect x="113" y="16" fill="#A6A376" width="14" height="14"/>
<rect x="129" y="16" fill="#AEAB81" width="14" height="14"/>
<rect x="145" y="16" fill="#ABA47A" width="14" height="14"/>
<rect x="161" y="16" fill="#B2A778" width="14" height="14"/>
<rect x="177" y="16" fill="#B7B185" width="14" height="14"/>
<rect x="193" y="16" fill="#BDB483" width="14" height="14"/>
<rect x="209" y="16" fill="#B8AC7C" width="14" height="14"/>
<rect x="225" y="16" fill="#BBAE80" width="14" height="14"/>
<rect x="241" y="16" fill="#C9B98A" width="15" height="14"/>
<rect y="32" fill="#979061" width="15" height="14"/>
<rect x="17" y="32" fill="#9A9362" width="14" height="14"/>
<rect x="33" y="32" fill="#9C915E" width="14" height="14"/>
<rect x="49" y="32" fill="#9F915B" width="14" height="14"/>
<rect x="65" y="32" fill="#A79A63" width="14" height="14"/>
<rect x="81" y="32" fill="#AAA26C" width="14" height="14"/>
<rect x="97" y="32" fill="#928760" width="14" height="14"/>
<rect x="113" y="32" fill="#74654D" width="14" height="14"/>
<rect x="129" y="32" fill="#766950" width="14" height="14"/>
<rect x="145" y="32" fill="#8C7E5C" width="14" height="14"/>
<rect x="161" y="32" fill="#B0A578" width="14" height="14"/>
<rect x="177" y="32" fill="#BEB57E" width="14" height="14"/>
<rect x="193" y="32" fill="#BDB480" width="14" height="14"/>
<rect x="209" y="32" fill="#C4B27A" width="14" height="14"/>
<rect x="225" y="32" fill="#BFAF7E" width="14" height="14"/>
<rect x="241" y="32" fill="#C6BB8A" width="15" height="14"/>
<rect y="48" fill="#A29967" width="15" height="14"/>
<rect x="17" y="48" fill="#A39D68" width="14" height="14"/>
<rect x="33" y="48" fill="#A79B63" width="14" height="14"/>
<rect x="49" y="48" fill="#AE9E62" width="14" height="14"/>
<rect x="65" y="48" fill="#B1A371" width="14" height="14"/>
<rect x="81" y="48" fill="#675B42" width="14" height="14"/>
<rect x="97" y="48" fill="#5D452C" width="14" height="14"/>
<rect x="113" y="48" fill="#40322B" width="14" height="14"/>
<rect x="129" y="48" fill="#312727" width="14" height="14"/>
<rect x="145" y="48" fill="#332927" width="14" height="14"/>
<rect x="161" y="48" fill="#473932" width="14" height="14"/>
<rect x="177" y="48" fill="#AE9F6D" width="14" height="14"/>
<rect x="193" y="48" fill="#C6BD89" width="14" height="14"/>
<rect x="209" y="48" fill="#C0B681" width="14" height="14"/>
<rect x="225" y="48" fill="#C6BD8F" width="14" height="14"/>
<rect x="241" y="48" fill="#D0CB97" width="15" height="14"/>
<rect y="64" fill="#AA9F6D" width="15" height="15"/>
<rect x="17" y="64" fill="#B0A76E" width="14" height="15"/>
<rect x="33" y="64" fill="#B2A46F" width="14" height="15"/>
<rect x="49" y="64" fill="#B9AD7A" width="14" height="15"/>
<rect x="65" y="64" fill="#897D5A" width="14" height="15"/>
<rect x="81" y="64" fill="#A58955" width="14" height="15"/>
<rect x="97" y="64" fill="#DBBA76" width="14" height="15"/>
<rect x="113" y="64" fill="#CBA461" width="14" height="15"/>
<rect x="129" y="64" fill="#7C5F37" width="14" height="15"/>
<rect x="145" y="64" fill="#332A29" width="14" height="15"/>
<rect x="161" y="64" fill="#292526" width="14" height="15"/>
<rect x="177" y="64" fill="#413930" width="14" height="15"/>
<rect x="193" y="64" fill="#C4BC86" width="14" height="15"/>
<rect x="209" y="64" fill="#C9C596" width="14" height="15"/>
<rect x="225" y="64" fill="#CFC696" width="14" height="15"/>
<rect x="241" y="64" fill="#D3CA90" width="15" height="15"/>
<rect y="81" fill="#B4AB70" width="15" height="14"/>
<rect x="17" y="81" fill="#B2AA74" width="14" height="14"/>
<rect x="33" y="81" fill="#B4AD77" width="14" height="14"/>
<rect x="49" y="81" fill="#B1AF86" width="14" height="14"/>
<rect x="65" y="81" fill="#6F5A36" width="14" height="14"/>
<rect x="81" y="81" fill="#E0BF7E" width="14" height="14"/>
<rect x="97" y="81" fill="#E5C882" width="14" height="14"/>
<rect x="113" y="81" fill="#E8C272" width="14" height="14"/>
<rect x="129" y="81" fill="#C59945" width="14" height="14"/>
<rect x="145" y="81" fill="#634E2E" width="14" height="14"/>
<rect x="161" y="81" fill="#2F2726" width="14" height="14"/>
<rect x="177" y="81" fill="#272526" width="14" height="14"/>
<rect x="193" y="81" fill="#888160" width="14" height="14"/>
<rect x="209" y="81" fill="#C2BA86" width="14" height="14"/>
<rect x="225" y="81" fill="#CAC28D" width="14" height="14"/>
<rect x="241" y="81" fill="#D8D396" width="15" height="14"/>
<rect y="97" fill="#B5AC74" width="15" height="14"/>
<rect x="17" y="97" fill="#B8B27E" width="14" height="14"/>
<rect x="33" y="97" fill="#C6BD86" width="14" height="14"/>
<rect x="49" y="97" fill="#8A7E53" width="14" height="14"/>
<rect x="65" y="97" fill="#795E3F" width="14" height="14"/>
<rect x="81" y="97" fill="#DDB674" width="14" height="14"/>
<rect x="97" y="97" fill="#E5C476" width="14" height="14"/>
<rect x="113" y="97" fill="#DEB467" width="14" height="14"/>
<rect x="129" y="97" fill="#D4A65D" width="14" height="14"/>
<rect x="145" y="97" fill="#A77F3E" width="14" height="14"/>
<rect x="161" y="97" fill="#312827" width="14" height="14"/>
<rect x="177" y="97" fill="#272424" width="14" height="14"/>
<rect x="193" y="97" fill="#514B3D" width="14" height="14"/>
<rect x="209" y="97" fill="#99935F" width="14" height="14"/>
<rect x="225" y="97" fill="#ACAE78" width="14" height="14"/>
<rect x="241" y="97" fill="#B3BE83" width="15" height="14"/>
<rect y="113" fill="#7B794C" width="15" height="14"/>
<rect x="17" y="113" fill="#A9A872" width="14" height="14"/>
<rect x="33" y="113" fill="#B9B781" width="14" height="14"/>
<rect x="49" y="113" fill="#665A3E" width="14" height="14"/>
<rect x="65" y="113" fill="#574430" width="14" height="14"/>
<rect x="81" y="113" fill="#987242" width="14" height="14"/>
<rect x="97" y="113" fill="#C69A4F" width="14" height="14"/>
<rect x="113" y="113" fill="#9F773A" width="14" height="14"/>
<rect x="129" y="113" fill="#7D6035" width="14" height="14"/>
<rect x="145" y="113" fill="#8C6D35" width="14" height="14"/>
<rect x="161" y="113" fill="#3A2E26" width="14" height="14"/>
<rect x="177" y="113" fill="#272425" width="14" height="14"/>
<rect x="193" y="113" fill="#3C382E" width="14" height="14"/>
<rect x="209" y="113" fill="#6F734E" width="14" height="14"/>
<rect x="225" y="113" fill="#87946A" width="14" height="14"/>
<rect x="241" y="113" fill="#879768" width="15" height="14"/>
<rect y="129" fill="#555939" width="15" height="14"/>
<rect x="17" y="129" fill="#716D44" width="14" height="14"/>
<rect x="33" y="129" fill="#706E49" width="14" height="14"/>
<rect x="49" y="129" fill="#504635" width="14" height="14"/>
<rect x="65" y="129" fill="#806540" width="14" height="14"/>
<rect x="81" y="129" fill="#D6AB62" width="14" height="14"/>
<rect x="97" y="129" fill="#D1A65B" width="14" height="14"/>
<rect x="113" y="129" fill="#D0A55C" width="14" height="14"/>
<rect x="129" y="129" fill="#DBB265" width="14" height="14"/>
<rect x="145" y="129" fill="#B38842" width="14" height="14"/>
<rect x="161" y="129" fill="#2F2927" width="14" height="14"/>
<rect x="177" y="129" fill="#252326" width="14" height="14"/>
<rect x="193" y="129" fill="#302F29" width="14" height="14"/>
<rect x="209" y="129" fill="#75764F" width="14" height="14"/>
<rect x="225" y="129" fill="#828B62" width="14" height="14"/>
<rect x="241" y="129" fill="#7B8C61" width="15" height="14"/>
<rect y="145" fill="#434834" width="15" height="14"/>
<rect x="17" y="145" fill="#464937" width="14" height="14"/>
<rect x="33" y="145" fill="#3D3E30" width="14" height="14"/>
<rect x="49" y="145" fill="#342828" width="14" height="14"/>
<rect x="65" y="145" fill="#614B35" width="14" height="14"/>
<rect x="81" y="145" fill="#D9A861" width="14" height="14"/>
<rect x="97" y="145" fill="#B79256" width="14" height="14"/>
<rect x="113" y="145" fill="#BD9555" width="14" height="14"/>
<rect x="129" y="145" fill="#D1A25B" width="14" height="14"/>
<rect x="145" y="145" fill="#7C5F31" width="14" height="14"/>
<rect x="161" y="145" fill="#2B2323" width="14" height="14"/>
<rect x="177" y="145" fill="#272324" width="14" height="14"/>
<rect x="193" y="145" fill="#272526" width="14" height="14"/>
<rect x="209" y="145" fill="#525440" width="14" height="14"/>
<rect x="225" y="145" fill="#677050" width="14" height="14"/>
<rect x="241" y="145" fill="#6E7E5A" width="15" height="14"/>
<rect y="161" fill="#404232" width="15" height="14"/>
<rect x="17" y="161" fill="#3D4435" width="14" height="14"/>
<rect x="33" y="161" fill="#36392F" width="14" height="14"/>
<rect x="49" y="161" fill="#2A2627" width="14" height="14"/>
<rect x="65" y="161" fill="#352B26" width="14" height="14"/>
<rect x="81" y="161" fill="#C08E4B" width="14" height="14"/>
<rect x="97" y="161" fill="#AB8344" width="14" height="14"/>
<rect x="113" y="161" fill="#9F7A3F" width="14" height="14"/>
<rect x="129" y="161" fill="#B98E47" width="14" height="14"/>
<rect x="145" y="161" fill="#67522F" width="14" height="14"/>
<rect x="161" y="161" fill="#272425" width="14" height="14"/>
<rect x="177" y="161" fill="#232123" width="14" height="14"/>
<rect x="193" y="161" fill="#242426" width="14" height="14"/>
<rect x="209" y="161" fill="#4E523C" width="14" height="14"/>
<rect x="225" y="161" fill="#5D6A4B" width="14" height="14"/>
<rect x="241" y="161" fill="#5E6E4B" width="15" height="14"/>
<rect y="177" fill="#3C3E32" width="15" height="14"/>
<rect x="17" y="177" fill="#434731" width="14" height="14"/>
<rect x="33" y="177" fill="#4E5336" width="14" height="14"/>
<rect x="49" y="177" fill="#312E29" width="14" height="14"/>
<rect x="65" y="177" fill="#212024" width="14" height="14"/>
<rect x="81" y="177" fill="#5D4A32" width="14" height="14"/>
<rect x="97" y="177" fill="#CA9F54" width="14" height="14"/>
<rect x="113" y="177" fill="#AF8745" width="14" height="14"/>
<rect x="129" y="177" fill="#7A6132" width="14" height="14"/>
<rect x="145" y="177" fill="#443929" width="14" height="14"/>
<rect x="161" y="177" fill="#242021" width="14" height="14"/>
<rect x="177" y="177" fill="#222021" width="14" height="14"/>
<rect x="193" y="177" fill="#262721" width="14" height="14"/>
<rect x="209" y="177" fill="#545339" width="14" height="14"/>
<rect x="225" y="177" fill="#6E734D" width="14" height="14"/>
<rect x="241" y="177" fill="#6D7547" width="15" height="14"/>
<rect y="193" fill="#404236" width="15" height="14"/>
<rect x="17" y="193" fill="#4B4E3E" width="14" height="14"/>
<rect x="33" y="193" fill="#616245" width="14" height="14"/>
<rect x="49" y="193" fill="#38332B" width="14" height="14"/>
<rect x="65" y="193" fill="#241F23" width="14" height="14"/>
<rect x="81" y="193" fill="#2F2A24" width="14" height="14"/>
<rect x="97" y="193" fill="#625034" width="14" height="14"/>
<rect x="113" y="193" fill="#5E4B32" width="14" height="14"/>
<rect x="129" y="193" fill="#443929" width="14" height="14"/>
<rect x="145" y="193" fill="#393027" width="14" height="14"/>
<rect x="161" y="193" fill="#2F2826" width="14" height="14"/>
<rect x="177" y="193" fill="#242124" width="14" height="14"/>
<rect x="193" y="193" fill="#252324" width="14" height="14"/>
<rect x="209" y="193" fill="#444537" width="14" height="14"/>
<rect x="225" y="193" fill="#62694D" width="14" height="14"/>
<rect x="241" y="193" fill="#69704B" width="15" height="14"/>
<rect y="209" fill="#3F4135" width="15" height="14"/>
<rect x="17" y="209" fill="#4B4E3E" width="14" height="14"/>
<rect x="33" y="209" fill="#666649" width="14" height="14"/>
<rect x="49" y="209" fill="#39342A" width="14" height="14"/>
<rect x="65" y="209" fill="#241F23" width="14" height="14"/>
<rect x="81" y="209" fill="#1E1E1E" width="14" height="14"/>
<rect x="97" y="209" fill="#493B29" width="14" height="14"/>
<rect x="113" y="209" fill="#413428" width="14" height="14"/>
<rect x="129" y="209" fill="#312827" width="14" height="14"/>
<rect x="145" y="209" fill="#2F2726" width="14" height="14"/>
<rect x="161" y="209" fill="#2B2727" width="14" height="14"/>
<rect x="177" y="209" fill="#222125" width="14" height="14"/>
<rect x="193" y="209" fill="#232226" width="14" height="14"/>
<rect x="209" y="209" fill="#424238" width="14" height="14"/>
<rect x="225" y="209" fill="#61654D" width="14" height="14"/>
<rect x="241" y="209" fill="#68704E" width="15" height="14"/>
<rect y="225" fill="#545842" width="15" height="14"/>
<rect x="17" y="225" fill="#616550" width="14" height="14"/>
<rect x="33" y="225" fill="#6B694B" width="14" height="14"/>
<rect x="49" y="225" fill="#424032" width="14" height="14"/>
<rect x="65" y="225" fill="#252228" width="14" height="14"/>
<rect x="81" y="225" fill="#1E1E22" width="14" height="14"/>
<rect x="97" y="225" fill="#2C2725" width="14" height="14"/>
<rect x="113" y="225" fill="#937842" width="14" height="14"/>
<rect x="129" y="225" fill="#685B33" width="14" height="14"/>
<rect x="145" y="225" fill="#846C37" width="14" height="14"/>
<rect x="161" y="225" fill="#67522D" width="14" height="14"/>
<rect x="177" y="225" fill="#2A2626" width="14" height="14"/>
<rect x="193" y="225" fill="#302B28" width="14" height="14"/>
<rect x="209" y="225" fill="#33332C" width="14" height="14"/>
<rect x="225" y="225" fill="#5E5E41" width="14" height="14"/>
<rect x="241" y="225" fill="#6E6D48" width="15" height="14"/>
<rect y="241" fill="#3A3B2F" width="15" height="14"/>
<rect x="17" y="241" fill="#383A30" width="14" height="14"/>
<rect x="33" y="241" fill="#373930" width="14" height="14"/>
<rect x="49" y="241" fill="#272726" width="14" height="14"/>
<rect x="65" y="241" fill="#202022" width="14" height="14"/>
<rect x="81" y="241" fill="#2D2826" width="14" height="14"/>
<rect x="97" y="241" fill="#7E6B3B" width="14" height="14"/>
<rect x="113" y="241" fill="#C7A256" width="14" height="14"/>
<rect x="129" y="241" fill="#C7A151" width="14" height="14"/>
<rect x="145" y="241" fill="#CCA453" width="14" height="14"/>
<rect x="161" y="241" fill="#AD8740" width="14" height="14"/>
<rect x="177" y="241" fill="#493A2E" width="14" height="14"/>
<rect x="193" y="241" fill="#4E402D" width="14" height="14"/>
<rect x="209" y="241" fill="#272628" width="14" height="14"/>
<rect x="225" y="241" fill="#3E3C30" width="14" height="14"/>
<rect x="241" y="241" fill="#5A5A36" width="15" height="14"/>
<rect y="257" fill="#3A372C" width="15" height="14"/>
<rect x="17" y="257" fill="#292927" width="14" height="14"/>
<rect x="33" y="257" fill="#292927" width="14" height="14"/>
<rect x="49" y="257" fill="#1E1E1E" width="14" height="14"/>
<rect x="65" y="257" fill="#292525" width="14" height="14"/>
<rect x="81" y="257" fill="#AC8948" width="14" height="14"/>
<rect x="97" y="257" fill="#DBB86C" width="14" height="14"/>
<rect x="113" y="257" fill="#DFBB67" width="14" height="14"/>
<rect x="129" y="257" fill="#E2BC6C" width="14" height="14"/>
<rect x="145" y="257" fill="#DFBC67" width="14" height="14"/>
<rect x="161" y="257" fill="#BD9441" width="14" height="14"/>
<rect x="177" y="257" fill="#60492E" width="14" height="14"/>
<rect x="193" y="257" fill="#493E2E" width="14" height="14"/>
<rect x="209" y="257" fill="#332A29" width="14" height="14"/>
<rect x="225" y="257" fill="#352E2C" width="14" height="14"/>
<rect x="241" y="257" fill="#525235" width="15" height="14"/>
<rect y="273" fill="#464530" width="15" height="14"/>
<rect x="17" y="273" fill="#3F3D2E" width="14" height="14"/>
<rect x="33" y="273" fill="#282727" width="14" height="14"/>
<rect x="49" y="273" fill="#222222" width="14" height="14"/>
<rect x="65" y="273" fill="#735834" width="14" height="14"/>
<rect x="81" y="273" fill="#DDB966" width="14" height="14"/>
<rect x="97" y="273" fill="#E7C678" width="14" height="14"/>
<rect x="113" y="273" fill="#E6C672" width="14" height="14"/>
<rect x="129" y="273" fill="#EBCB74" width="14" height="14"/>
<rect x="145" y="273" fill="#E3BC66" width="14" height="14"/>
<rect x="161" y="273" fill="#B68C40" width="14" height="14"/>
<rect x="177" y="273" fill="#604A32" width="14" height="14"/>
<rect x="193" y="273" fill="#49402D" width="14" height="14"/>
<rect x="209" y="273" fill="#665535" width="14" height="14"/>
<rect x="225" y="273" fill="#5E5038" width="14" height="14"/>
<rect x="241" y="273" fill="#322F2C" width="15" height="14"/>
<rect y="289" fill="#625B31" width="15" height="14"/>
<rect x="17" y="289" fill="#343129" width="14" height="14"/>
<rect x="33" y="289" fill="#1E1E22" width="14" height="14"/>
<rect x="49" y="289" fill="#423829" width="14" height="14"/>
<rect x="65" y="289" fill="#CEA858" width="14" height="14"/>
<rect x="81" y="289" fill="#E5C66E" width="14" height="14"/>
<rect x="97" y="289" fill="#E9CA72" width="14" height="14"/>
<rect x="113" y="289" fill="#EBCF7E" width="14" height="14"/>
<rect x="129" y="289" fill="#E3C778" width="14" height="14"/>
<rect x="145" y="289" fill="#E4C36C" width="14" height="14"/>
<rect x="161" y="289" fill="#B4883B" width="14" height="14"/>
<rect x="177" y="289" fill="#7C6334" width="14" height="14"/>
<rect x="193" y="289" fill="#95793A" width="14" height="14"/>
<rect x="209" y="289" fill="#776339" width="14" height="14"/>
<rect x="225" y="289" fill="#4B4334" width="14" height="14"/>
<rect x="241" y="289" fill="#282828" width="15" height="14"/>
<rect y="305" fill="#514A2E" width="15" height="15"/>
<rect x="17" y="305" fill="#1E1F23" width="14" height="15"/>
<rect x="33" y="305" fill="#202125" width="14" height="15"/>
<rect x="49" y="305" fill="#3F3A2F" width="14" height="15"/>
<rect x="65" y="305" fill="#997F4A" width="14" height="15"/>
<rect x="81" y="305" fill="#C5A758" width="14" height="15"/>
<rect x="97" y="305" fill="#E4C572" width="14" height="15"/>
<rect x="113" y="305" fill="#E3CF84" width="14" height="15"/>
<rect x="129" y="305" fill="#E1CE7C" width="14" height="15"/>
<rect x="145" y="305" fill="#D5B767" width="14" height="15"/>
<rect x="161" y="305" fill="#85723B" width="14" height="15"/>
<rect x="177" y="305" fill="#49422E" width="14" height="15"/>
<rect x="193" y="305" fill="#2D2C29" width="14" height="15"/>
<rect x="209" y="305" fill="#272728" width="14" height="15"/>
<rect x="225" y="305" fill="#222027" width="14" height="15"/>
<rect x="241" y="305" fill="#1F2026" width="15" height="15"/>
<rect y="322" fill="#202124" width="15" height="14"/>
<rect x="17" y="322" fill="#1C2023" width="14" height="14"/>
<rect x="33" y="322" fill="#272727" width="14" height="14"/>
<rect x="49" y="322" fill="#3B3C2E" width="14" height="14"/>
<rect x="65" y="322" fill="#403E32" width="14" height="14"/>
<rect x="81" y="322" fill="#554E37" width="14" height="14"/>
<rect x="97" y="322" fill="#675A3A" width="14" height="14"/>
<rect x="113" y="322" fill="#796541" width="14" height="14"/>
<rect x="129" y="322" fill="#796D3F" width="14" height="14"/>
<rect x="145" y="322" fill="#534E32" width="14" height="14"/>
<rect x="161" y="322" fill="#303029" width="14" height="14"/>
<rect x="177" y="322" fill="#202425" width="14" height="14"/>
<rect x="193" y="322" fill="#30312D" width="14" height="14"/>
<rect x="209" y="322" fill="#30312D" width="14" height="14"/>
<rect x="225" y="322" fill="#242527" width="14" height="14"/>
<rect x="241" y="322" fill="#1F2324" width="15" height="14"/>
<rect y="338" fill="#1E1F25" width="15" height="14"/>
<rect x="17" y="338" fill="#1D1F25" width="14" height="14"/>
<rect x="33" y="338" fill="#232729" width="14" height="14"/>
<rect x="49" y="338" fill="#242527" width="14" height="14"/>
<rect x="65" y="338" fill="#232728" width="14" height="14"/>
<rect x="81" y="338" fill="#404232" width="14" height="14"/>
<rect x="97" y="338" fill="#424135" width="14" height="14"/>
<rect x="113" y="338" fill="#34342C" width="14" height="14"/>
<rect x="129" y="338" fill="#32352E" width="14" height="14"/>
<rect x="145" y="338" fill="#212526" width="14" height="14"/>
<rect x="161" y="338" fill="#1D2124" width="14" height="14"/>
<rect x="177" y="338" fill="#232727" width="14" height="14"/>
<rect x="193" y="338" fill="#2B2E2B" width="14" height="14"/>
<rect x="209" y="338" fill="#3D3E34" width="14" height="14"/>
<rect x="225" y="338" fill="#4E4A37" width="14" height="14"/>
<rect x="241" y="338" fill="#3A3831" width="15" height="14"/>
<rect y="354" fill="#1E2028" width="15" height="14"/>
<rect x="17" y="354" fill="#1C1E26" width="14" height="14"/>
<rect x="33" y="354" fill="#1E1E24" width="14" height="14"/>
<rect x="49" y="354" fill="#1E2225" width="14" height="14"/>
<rect x="65" y="354" fill="#1F2326" width="14" height="14"/>
<rect x="81" y="354" fill="#212527" width="14" height="14"/>
<rect x="97" y="354" fill="#222628" width="14" height="14"/>
<rect x="113" y="354" fill="#2A2A28" width="14" height="14"/>
<rect x="129" y="354" fill="#212527" width="14" height="14"/>
<rect x="145" y="354" fill="#1E2225" width="14" height="14"/>
<rect x="161" y="354" fill="#1F2228" width="14" height="14"/>
<rect x="177" y="354" fill="#1F2424" width="14" height="14"/>
<rect x="193" y="354" fill="#2B2D2A" width="14" height="14"/>
<rect x="209" y="354" fill="#4B4735" width="14" height="14"/>
<rect x="225" y="354" fill="#443F31" width="14" height="14"/>
<rect x="241" y="354" fill="#252627" width="15" height="14"/>
<rect y="370" fill="#1E2128" width="15" height="14"/>
<rect x="17" y="370" fill="#1E2128" width="14" height="14"/>
<rect x="33" y="370" fill="#1F2024" width="14" height="14"/>
<rect x="49" y="370" fill="#1D1F25" width="14" height="14"/>
<rect x="65" y="370" fill="#1D2024" width="14" height="14"/>
<rect x="81" y="370" fill="#1E2225" width="14" height="14"/>
<rect x="97" y="370" fill="#1E2225" width="14" height="14"/>
<rect x="113" y="370" fill="#202527" width="14" height="14"/>
<rect x="129" y="370" fill="#1E2125" width="14" height="14"/>
<rect x="145" y="370" fill="#1E2124" width="14" height="14"/>
<rect x="161" y="370" fill="#1D2024" width="14" height="14"/>
<rect x="177" y="370" fill="#1F2326" width="14" height="14"/>
<rect x="193" y="370" fill="#2F302E" width="14" height="14"/>
<rect x="209" y="370" fill="#2F2F2D" width="14" height="14"/>
<rect x="225" y="370" fill="#212428" width="14" height="14"/>
<rect x="241" y="370" fill="#1E2127" width="15" height="14"/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/tinycolor.js'></script> <script src="js/index.js"></script>
</body>
</html>

MFA iteration example - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,700);
em{font-style: normal;color:#EC2D6C;}
i{color:#A784CB;}
html,body{height: 100%;}
body{display: flex; justify-content:space-between; background-color: #1b2d3d; align-items:center;
}
svg, img{width:200px}
div{ color:#f0f5f1; margin-top: 50px; position: relative; font-size: 20px; line-height: 2; font-family:'Source Code Pro'; white-space: nowrap; padding: 0 20px;
}
input{width: 100%;display: block;}
span{ border:1px solid maroon; border-radius:8px; background-color: #EC2D6C; padding: 10px; padding-right: 0;
}
*{padding: 0;margin: 0;box-sizing:border-box;}
output{font-weight: 700;color:#9AA92F;}
select { -webkit-appearance: none; font-family: 'Source Code Pro'; font-size: 20px; color:#f0f5f1; padding-left: 5px; border:none; background-color: transparent; outline:none;
}
strong{ color:#95E693;
}
/*coda colors
white : #f0f5f1
red : #d54b67
yellow: #f5cc93
green: #92e790 (8eed81)
blue: #97d9e1
purple: #8375b8
background: #1b2d3d*/
div{margin-top: 50px;}

MFA iteration example - Script Codes JS Codes

var pixelArray = Array.prototype.slice.call(document.querySelectorAll('rect'));
function convertImage() { pixelArray.forEach(animatestuff);
}
function animatestuff(element, index, array) { var newColor; var mode = document.querySelector('select').value; switch (mode) { case "greyscale": newColor = tinycolor(element.getAttribute("fill")).greyscale().toString(); break; case "saturated": newColor = tinycolor(element.getAttribute("fill")).saturate(80).toString(); break; case "sepiatone": var color1 = tinycolor(element.getAttribute("fill")).spin(10).toString(); var color2 = "ffc233"; newColor = tinycolor.mix(color1, color2, 30).toString(); console.log(newColor, color1, color2); /* tinycolor.mix(element.getAttribute("fill")).greyscale().lighten(80).toString(), '#fff', amount = 50;*/ break; case "random": /* newColor = tinycolor.random().toString(); */ newColor = tinycolor(element.getAttribute("fill")).spin(newHue(0, 361)).toString(); break; default: console.log(element, index, array); }; TweenLite.to(element, 0.1, { fill: newColor, delay: index * 0.02 })
};
function newHue(min, max) { return Math.random() * (max - min) + min;
}
convertImage();
MFA iteration example - Script Codes
MFA iteration example - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3.5
Size 7,065 Kb
Views 34,408
Do you need developer help for MFA iteration example?

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!

Andy Hullinger (andyhullinger) Script Codes
Name
Example Responsive Resume
Simple example infographic pen
Solved By Flexbox - an excerpt
Simple photo captions
GSAP Animation with TweenMax
Mageractive Week 1
Clean SVG Map of USA
Banner Example
Landing Page Demo
Semantic HTML for animated menus
Create amazing web content 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!