Letter I

Developer
Tadaima
Size
97,110 Kb
Views
16,192
  1. Letter I Previews
  2. Letter I HTML Codes
  3. Letter I CSS Codes
  4. Letter I JS Codes

How do I make an letter i?

Just for fun :). What is a letter i? How do you make a letter i? This script and codes were developed by Tadaima on 01 December 2022, Thursday.

Letter I Previews
IQ Test

Letter I - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Letter I</title> <title>Letter I</title> <meta charset="utf-8"> <meta name="description" content="Letter I"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A group of digital interface crafters."> <meta name="author" content="Tadaima"> <meta name="organization" content="Tadaima Web Site"> <meta name="application-name" content="Tadaima Web Site"> <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_tadaim.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="flexy__item flexy--items-center flexy--justify-center flexy--column"> <svg version="1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1280 1280" width="30em"> <defs> <lineargradient id="a" gradientunits="userSpaceOnUse" x1="80%" y1="80%" x2="50%" y2="30%"> <stop offset="0" style="stop-color:#39B54A"></stop> <stop offset="0.5" style="stop-color:#29ABDF"></stop> <stop offset="1" style="stop-color:#39B54A"></stop> </lineargradient> <lineargradient id="b" gradientunits="userSpaceOnUse" x1="10%" y1="40%" x2="60%" y2="15%"> <stop offset="2.146504e-03" stop-color="#29ABDF"></stop> <stop offset="0.5594" stop-color="#39B54A"></stop> <stop offset="0.9174" stop-color="#295e3e"></stop> </lineargradient> </defs> <g transform="translate(256,616)"> <circle id="firstDot" cx="716.5" cy="194.5" r="0" fill="#30af9f"></circle> </g> <g fill="none" stroke-width="5em" stroke-linecap="round"> <g stroke="url(#b)"> <path id="secondLine" d="M318,663c150.2-66.5,295-169,363.5-321.1" stroke-dasharray="60em 60em" stroke-dashoffset="60em"></path> </g> <g stroke="url(#a)"> <path class="svg-i__line" id="firstLine" d="M972.8,810c-60.6,74-113.7,154.2-178.7,224.4c-33.2,35.9-70.8,69.9-116.9,86.5 c-46,16.6-102.3,12.5-137.9-21.1c-37.2-35-43.5-91.5-40.9-142.5c8.9-178.6,167.7-572.5,183.1-615.4" stroke-dasharray="90em 90em" stroke-dashoffset="90em"></path> </g> </g> <circle id="secondDot" cx="730" cy="194" r="0" fill="#39B54A"></circle> </svg> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"> <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80"> <title>Tadaima Studio.</title> <desc>A group of digital interface crafters.</desc> <g> <rect class="st5" y="0" width="80" height="80"></rect> </g> <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10" points="52,27 25,27 25,23 55,23 55,31 40,31 40,54 "></polyline> <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10" points="24,31 36,31 36,57 44,57 44,34 "></polyline> </svg></a></h1> </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg"> <defs> <circle id="a" cx="1468" cy="133" r="35"></circle> <mask id="h" x="0" y="0" width="70" height="70" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> </mask> <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle> <mask id="i" x="0" y="0" width="47" height="47" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> </mask> <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle> <mask id="j" x="0" y="0" width="57" height="57" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> </mask> <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path> <mask id="k" x="0" y="0" width="89.201" height="77.25" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> </mask> <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path> <mask id="l" x="0" y="0" width="68.277" height="59.13" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> </mask> <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path> <mask id="m" x="0" y="0" width="76.629" height="66.362" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> </mask> <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path> <mask id="n" x="0" y="0" width="52.997" height="45.897" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </mask> </defs> <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF"> <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path> <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path> <use class="svg-bg_element" mask="url(#k)" stroke-width="6" transform="rotate(90 1193.375 341.5)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> <use class="svg-bg_element" mask="url(#l)" stroke-width="6" transform="rotate(45 1610.8 542.863)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> <use class="svg-bg_element rotate-anim" mask="url(#m)" stroke-width="6" transform="rotate(45 51.045 1001.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> <use class="svg-bg_element" mask="url(#n)" stroke-width="6" transform="rotate(20 46.045 334.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Letter I - Script Codes CSS Codes

body { background-image: none; background-color: #971164; -webkit-animation: anim 3s linear forwards; animation: anim 3s linear forwards;
}
@-webkit-keyframes anim { 50% { background-color: #642a89; }
}
@keyframes anim { 50% { background-color: #642a89; }
}

Letter I - Script Codes JS Codes

var firstDot = Snap("#firstDot"), secondDot = Snap("#secondDot"), secondLine = Snap("#secondLine"), firstLine = Snap("#firstLine");
firstDot.animate({ r: '2.5em'
}, 600, mina.backout, function() { firstLine.animate({ 'stroke-dashoffset': 0 }, 800, mina.easeout, function() { secondDot.animate({ r: '58.5' }, 600, mina.backout); secondLine.animate({ 'stroke-dashoffset': 0 }, 1600, mina.easein); });
});
Letter I - Script Codes
Letter I - Script Codes
Home Page Home
Developer Tadaima
Username tadaima
Uploaded December 01, 2022
Rating 3
Size 97,110 Kb
Views 16,192
Do you need developer help for Letter I?

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!

Tadaima (tadaima) Script Codes
Name
Bars Chart
Safe Range Tooltip
Progress Ball
CSS Random Mosaic
Base Styles
Ratings Inspiration
Infinite Calendar
CSS Dropdown
HTML5 Video Player
Logo Effect
Create amazing art & images 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!