PageSourceSearch

https://textart.io/image

html textart.io collected 2026-10-02 14:54:52 UTC 24,836 bytes, 729 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <title>ASCII Art Generator</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <meta name="application-name" content="TextArt.io" />
8    <meta name="google-site-verification" content="4zxnsw6HrjtN7J7SFsW51GL4TAHFbjFxWhy4MnVJaYk" />
9    <meta name="msvalidate.01" content="862295C6F21EB0467870986498893633" />
10    <meta name="author" content="orthosie" />
11    <meta name="robots" content="All" />
12    <meta name="description" content="Generate ascii art from an image. Upload your photos or images and get an equivalent ascii art in color or monochrome.">
13    <meta name="keywords" content="" />
14    <meta name="generator" content="Orthosie META Tag Generator: http://toolswebtop.com/seo/metatag" />
15    <meta name="rating" content="General" />
16
17    <meta name="dcterms.title" content="ASCII Art Generator" />
18    <meta name="dcterms.contributor" content="orthosie" />
19    <meta name="dcterms.creator" content="orthosie" />
20    <meta name="dcterms.publisher" content="orthosie" />
21    <meta name="dcterms.description" content="Generate ascii art from an image. Upload your photos or images and get an equivalent ascii art in color or monochrome." />
22    <meta name="dcterms.rights" content="Copyright 2014-16 ASCII.gallery" />
23
24    <meta property="og:type" content="website" />
25    <meta property="og:title" content="ASCII Art Generator" />
26    <meta property="og:site_name" content="ASCII.gallery" />    
27    <meta property="og:description" content="Generate ascii art from an image. Upload your photos or images and get an equivalent ascii art in color or monochrome." />
28    <meta property="twitter:title" content="ASCII Art Generator" />
29    <meta property="twitter:description" content="Generate ascii art from an image. Upload your photos or images and get an equivalent ascii art in color or monochrome." />
30
31    <link type="image/x-icon" href="/favicon.ico" rel="shortcut icon"/>
32
33    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
34    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
35
36    
36<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
36
37    
37<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
37
38    <!-- Latest compiled and minified JavaScript -->
39    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
40
41    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
42    <!--[if lt IE 9]>
43      
43<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
43
44    <![endif]-->
45    <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
46
47<style>
48   body {
49      font-family: 'Roboto', sans-serif;
50      font-size: 20px;
51   }
52
53.head-room {
54  margin-top: 15px;
55}
56
57.leg-room {
58  margin-bottom: 15px;
59}
60
61.top-ad {
62    background-color: #111;
63    width: 100%;
64    background-image: url("/img/bg.png");  
65}
66
67    .pre-art {
68      margin: 0;
69      padding-left: 20px;  
70      padding-top: 40px;  
71      padding-bottom: 40px;  
72    }
73
74
75.bggreenshade {
76  padding-top: 20px;
77  background-color: #f8f8f8;
78  padding-bottom: 20px;
79}
80
81.navbar {
82   border-radius: 0px;
83   -moz-border-radius: 0px;
84   -webkit-border-radius: 0px;
85}
86
87.navbar-brand,
88.navbar-nav li a {
89    line-height: 70px;
90    height: 70px;
91    padding-top: 0;
92}
93
94  ul.dropdown-menu
95  {
96     z-index: 999;
97  }
98
99#custom-bootstrap-menu.navbar-inverse .navbar-brand {
100    color: rgba(119, 119, 119, 1);
101}
102#custom-bootstrap-menu.navbar-inverse {
103    font-size: 14px;
104    background-color: rgba(248, 248, 248, 1);
105    border-width: 1px;
106}
107#custom-bootstrap-menu.navbar-inverse .navbar-nav>li>a {
108    color: rgba(255, 255, 255, 1);
109    background-color: rgba(248, 248, 248, 0);
110}
111.dropdown-menu li a:hover,
112#custom-bootstrap-menu.navbar-inverse .navbar-nav  li a:hover,
113#custom-bootstrap-menu.navbar-inverse .navbar-nav>li>a:focus {
114    color: rgba(51, 51, 51, 1);
115    background-color: #33cc99;
116}
117
118
119#custom-bootstrap-menu.navbar-inverse .navbar-nav>.active>a,
120#custom-bootstrap-menu.navbar-inverse .navbar-nav>.active>a:hover,
121#custom-bootstrap-menu.navbar-inverse .navbar-nav>.active>a:focus {
122    color: rgba(85, 85, 85, 1);
123    background-color: #33cc99;
124}
125#custom-bootstrap-menu.navbar-inverse .navbar-toggle {
126    border-color: #33cc99;
127    padding-top: 20px;
128    padding-bottom: 20px;
129}
130#custom-bootstrap-menu.navbar-inverse .navbar-toggle:hover,
131#custom-bootstrap-menu.navbar-inverse .navbar-toggle:focus {
132    /*background-color: #33cc99;*/
133}
134#custom-bootstrap-menu.navbar-inverse .navbar-toggle .icon-bar {
135    background-color: #33cc99;
136}
137#custom-bootstrap-menu.navbar-inverse .navbar-toggle:hover .icon-bar,
138#custom-bootstrap-menu.navbar-inverse .navbar-toggle:focus .icon-bar {
139    background-color: #33cc99;
140}
141
142canvas {
143 display: block;
144}
145
146.navbar {
147  margin-bottom: 0px;
148}
149
150   .title {
151      background-color: #33cc99;
152      padding-top: 20px;
153      padding-bottom: 20px;
154      color: #fff;
155      font-weight: bold;
156      padding-left: 2%;
157      margin:0;
158   }
159
160   footer {
161      margin-top: 0px;
162      padding: 0;
163      padding-top: 40px;
164      border-top: 4px solid #000;
165      background-color: #33cc99;
166   }
167
168   footer ul li a ,
169   footer ul li a:hover ,
170   footer ul li a:visited {
171      color: #fff;
172      text-decoration: none;
173   }
174   footer ul, footer li{
175         list-style:none;
176         list-style-type:none;
177         list-style-position: inside;
178         padding:0;margin:0;
179         padding-left: 0;
180         margin-left: 0;
181         line-height:30px
182   }
183
184   .footer-links {
185      padding-bottom: 60px;
186   }
187.bottom-copyright {
188   width: 100%;
189   padding-top: 15px;
190   padding-bottom: 15px;
191   text-align: center;
192   background-color: #33dd99;
193}
194   .high-light {
195      color: #33cc99;
196   }
197
198ul.tags {
199    margin-top:20px;
200    margin-bottom:-10px;
201    margin-left:-10px;
202}
203
204.tags{
205    margin-right:10px;
206    padding:0;
207    list-style:none;
208    margin-bottom: 25px;
209    font-family: 'Serif';
210    font-size: 12px;
211}
212
213.tags li, .tags a{
214    float:left;
215    height:24px;
216    line-height:24px;
217    position:relative;
218    font-size:12px;
219    margin-bottom: 15px;
220    }
221.tags a{
222    margin-left:20px;
223    padding:0 10px 0 12px;
224    /*background:#0089e0;*/
225    /*background: #9fcc25;*/
226    background: #33cc99;
227    color:#fff;
228    text-decoration:none;
229    -moz-border-radius-bottomright:4px;
230    -webkit-border-bottom-right-radius:4px;
231    border-bottom-right-radius:4px;
232    -moz-border-radius-topright:4px;
233    -webkit-border-top-right-radius:4px;
234    border-top-right-radius:4px;
235    }
236
237.tags a:before{
238    content:"";
239    float:left;
240    position:absolute;
241    top:0;
242    left:-12px;
243    width:0;
244    height:0;
245    /*border-color:transparent #0089e0 transparent transparent;*/
246    /*border-color:transparent #9fcc25 transparent transparent;*/
247    border-color:transparent #33cc99 transparent transparent;
248    border-style:solid;
249    border-width:12px 12px 12px 0;
250    }
251.tags a:after{
252    content:"";
253    position:absolute;
254    top:10px;
255    left:0;
256    float:left;
257    width:4px;
258    height:4px;
259    -moz-border-radius:2px;
260    -webkit-border-radius:2px;
261    border-radius:2px;
262    background:#fff;
263    -moz-box-shadow:-1px -1px 2px #004977;
264    -webkit-box-shadow:-1px -1px 2px #004977;
265    box-shadow:-1px -1px 2px #004977;
266    }
267.tags a:hover{background: #0089e0}
268
269.tags a:hover:before{border-color:transparent #0089e0 transparent transparent;}
270
271.box {
272   border: 1px solid #d4d4d4;
273}
274
275.pre {
276   background-color: #fff;
277   border: 1px solid #d4d4d4;
278   border-radius: 2px;
279   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
280   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
281   max-height: 100%;
282}
283
284.pre-x-scrollable{background-color:#fefefe;background-color: rgb(254,254,254,0.8);overflow-x:auto;word-wrap:normal;white-space:pre;max-width:100%}
285
286  .pre-art {
287     background-color: #000;
288     color: #00cc00;
289  }
290
291
292.ascii-wrapper {
293   position: relative;
294   width: 100%;
295   min-height: 50px; 
296   margin: 0;
297}
298
299
300.ascii-homebrew {
301     background-color: #000;
302     color: #00cc00;
303}
304
305.ascii-dark {
306     background-color: #000;
307     color: #fff;
308}
309
310.ascii-light {
311     background-color: #fff;
312     color: #000;
313}
314
315.ascii-controls { display: none; }
316.ascii-wrapper:hover  .ascii-controls{ display: block; }
317.ascii-wrapper:not(:hover)  .ascii-controls{ display: none; }
318
319.colorschemes {
320	position:absolute;
321	top:0px;right:0px;
322	width:150px;height:80px;padding:5px;
323	text-align:center;
324	background-color:#eee;
325	color: #000;
326	background-color: rgba(255,255,255,0.6);
327	z-index:999
328}
329
330.colorschemes .colorbox {
331  display:inline-block;
332  margin-top:5px;
333  width:40px;height:40px;text-align:center;padding:5px;cursor:pointer;
334  border: 1px solid #fefefe;
335  font-size: 18px;
336  margin-bottom: 5px;
337}
338
339#homebrew{background-color:#000;color:#0c0}
340#dark{background-color:#000;color:#fff}
341#light{background-color:#fff;color:#000 }
342
343
344
345.yamm .nav,
346.yamm .collapse,
347.yamm .dropup,
348.yamm .dropdown {
349  position: static;
350}
351.yamm .container {
352  position: relative;
353}
354.yamm .dropdown-menu {
355  left: auto;
356}
357.yamm .yamm-content {
358  padding: 20px 30px;
359}
360.yamm .dropdown.yamm-fw .dropdown-menu {
361  left: 0;
362  right: 0;
363}
364
365.dropdown-submenu{
366  position:relative;
367  z-index: 102;
368}
369.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
370.dropdown-submenu:hover>.dropdown-menu{display:block;}
371.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
372.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
373.dropdown-submenu.pull-left{float:none;}
374.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
375
376</style>
377
378<script>
379function set_homebrew_scheme(elementid) {
380    var element = document.getElementById(elementid);
381    element.className += " ascii-homebrew";
382    element.className = element.className.replace( /(?:^|\s)ascii-dark(?!\S)/g , '' ); 
383    element.className = element.className.replace( /(?:^|\s)ascii-light(?!\S)/g , '' ); 
384}
385
386function set_dark_scheme(elementid) {
387    var element = document.getElementById(elementid);
388    element.className += " ascii-dark";
389    element.className = element.className.replace( /(?:^|\s)ascii-homebrew(?!\S)/g , '' ); 
390    element.className = element.className.replace( /(?:^|\s)ascii-light(?!\S)/g , '' ); 
391}
392
393function set_light_scheme(elementid) {
394    var element = document.getElementById(elementid);
395    element.className += " ascii-light";
396    element.className = element.className.replace( /(?:^|\s)ascii-dark(?!\S)/g , '' ); 
397    element.className = element.className.replace( /(?:^|\s)ascii-homebrew(?!\S)/g , '' ); 
398}
399</script>
vendor: 1 bytes, line 399
399
400<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
vendor: 1 bytes, line 400
400
401<script>
402  (adsbygoogle = window.adsbygoogle || []).push({
403    google_ad_client: "ca-pub-4658013134207481",
404    enable_page_level_ads: true
405  });
406</script>
406
407<style>
408    .pre-art {
409      margin: 0;
410      padding-left: 20px;  
411      padding-top: 40px;  
412      padding-bottom: 40px;  
413    }
414</style>
415    
415<script src="/js/colorscheme.js"></script>
415
416</head>
417<body>
418<div class="top-ad text-center">
419	
419<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
419
420	<!-- ascii.gallery responsive -->
421	<ins class="adsbygoogle"
422	     style="display:block"
423	     data-ad-client="ca-pub-4658013134207481"
424	     data-ad-slot="7423734203"
425	     data-ad-format="auto"></ins>
426	
426<script>
427	(adsbygoogle = window.adsbygoogle || []).push({});
428	</script>
428
429</div>
430<nav  id="custom-bootstrap-menu"  class="navbar yamm navbar-inverse navbar-static-top" role="navigation">
431    <!-- Brand and toggle get grouped for better mobile display -->
432    <div class="navbar-header">
433      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
434        <span class="sr-only">Toggle navigation</span>
435        <span class="icon-bar"></span>
436        <span class="icon-bar"></span>
437        <span class="icon-bar"></span>
438      </button>
439      <a class="navbar-brand" href="/#"><span class="high-light">{ TEXTART.io }</span></a>
440    </div>
441
442    <!-- Collect the nav links, forms, and other content for toggling -->
443    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
444      <ul class="nav navbar-nav">
445            <li class="dropdown ">
446               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="Create"> Create <b class="caret"></b></a>
447                <ul class="dropdown-menu">
448                     <li  tabindex="-1"  ><a href="/figlet#" data-title="ASCII.figlet"> ASCII.figlet </a></li>
449                     <li tabindex="-1"  class="active"><a href="/image#" data-title="ASCII.image"> ASCII.image </a></li>
450                     <li  tabindex="-1"  ><a href="/matheq#" data-title="ASCII.math"> ASCII.math </a></li>
451                     <li  tabindex="-1"  ><a href="/table#" data-title="ASCII.table"> ASCII.table </a></li>
452                    <li tabindex="-1"  ><a href="/cowsay#" data-title="Cow.says"> Cow.says </a></li>
453                     <li  tabindex="-1"  ><a href="/sequence#" data-title="ASCII.sequence"> ASCII.sequence</a></li>
454                </ul>
455            </li>
456            <li class="dropdown ">
457               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="Consume"> Consume <b class="caret"></b></a>
458                <ul class="dropdown-menu">
459                      <li  tabindex="-1"   ><a href="/art#" data-title="ASCII.art"> ASCII.art </a></li>
460                </ul>
461            </li>
462            <li class="dropdown ">
463               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="Have Fun"> Have Fun <b class="caret"></b></a>
464                <ul class="dropdown-menu">
465                     <li  tabindex="-1"  ><a href="/webcam#" data-title="ASCII.webcam"> ASCII.webcam</a></li>
466                </ul>
467            </li>
468            <li class="dropdown ">
469               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="api"> API <b class="caret"></b></a>
470                <ul class="dropdown-menu">
471                      <li  tabindex="-1"   ><a href="/api/figlet#" data-title="Figlet API"> Figlet API</a></li>
472                      <li  tabindex="-1"   ><a href="/api/cowsay#" data-title="Cowsay API"> Cowsay API</a></li>
473                      <li  tabindex="-1"   ><a href="/api/img2txt#" data-title="Image to Text API"> Image to Text Art API</a></li>
474                </ul>
475            </li>
476	    <li class="dropdown">
477	       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-hand-right"></span> About <b class="caret"></b></a>
478	       <ul class="dropdown-menu">
479		       <li><a href="/terms#" title="Terms of use"> <span class="glyphicon glyphicon-tasks"></span> Terms of use</a></li>
480		       <li><a href="/privacy#" title="Privacy Policy"> <span class="glyphicon glyphicon-tasks"></span> Privacy Policy</a></li>
481		       <li><a href="/contactus#" title="Contact us"> <span class="glyphicon glyphicon-envelope"></span> Contact us</a></li>
482	       </ul>
483	    </li>
484      </ul>
485      <ul class="nav navbar-nav navbar-right">
486            <li class="dropdown ">
487               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="Search"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
488                <ul class="dropdown-menu ">
489                  <li>
490                    <div class="yamm-content">
491                      <div class="row">
492                        <div class="col-sm-12">
493					  <form class="form form-horizontal" action="/search" role="search">
494					     <div class="input-group">
495						  <input type="text" class="search-query form-control input-lg" placeholder="Search TextArt.io..." name="q" value="" id="q"/> 
496						  <div class="input-group-btn">
497						     <button class="btn btn-lg btn-success" type="submit" >Search</button>
498						  </div>
499					     </div>
500					  </form>
501                         </div>
502                      </div>
503                    </div>
504                  </li>
505                </ul>
506            </li>
507            <li class="dropdown ">
508               <a href="#" data-toggle="dropdown" class="dropdown-toggle" data-title="Search"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
509                <ul class="dropdown-menu ">
510                         <li><a href="/login#" title="Login"> <span class="glyphicon glyphicon-log-in"></span> Login</a></li>
511             <li><a href="/register#" title="Register"> <span class="glyphicon glyphicon-edit"></span> Register</a></li>
512                            </ul>
513            </li>
514      </ul>
515    </div><!-- /.navbar-collapse -->
516</nav>
517<div class="title leg-room">
518          <h1>ASCII Art Generator</h1>
519</div>
520<div id="result" class="ascii-wrapper">
521</div>
522<div class="container-fluid">
523  <div class="row head-room">
524    <div class="col-sm-7 col-md-7 col-lg-7 col-xs-12">
525          <p class="text-muted">Generate an ASCII art from a photo or an image. Works from your browser on desktop or mobile. If you like this service you might be interested in our <a href="/figlet" title="ASCII text generator">ASCII text generator</a> service as well which converts your text into an ascii art.</p>
526	      <form id="ascii" role="form" method="post"  enctype="multipart/form-data">
527        <p><strong>Select whether you want monochrome or color ascii art</strong></p>
528        <div class="radio-inline">
529          <label>
530             <input type="radio" class="form-control" id="atype" name="type" value="mono">Mono
531          </label>
532        </div>
533        <div class="radio-inline">
534          <label>
535             <input type="radio" class="form-control" name="type" value="color" checked>Color
536          </label>
537        </div>
538        <p class="head-room"><strong>Specify the image file to convert to ascii art</strong></p>
539        <div class="tabpane">
540		<ul class="nav nav-tabs">
541		    <li class="active"><a href="#upload" data-toggle="tab">From your computer</a></li>
542		    <li><a href="#url" data-toggle="tab">From Web</a></li>
543		</ul>
544		<div class="tab-content">
545		   <div class="tab-pane active" id="upload">
546			<div class="form-group elbow-room">
547				<label for="tfile">Select an image to upload</label>
548				<input type="file" name="image" id="tfile" />
549			</div>
550		   </div>
551		   <div class="tab-pane" id="url">
552			<div class="form-group">
553				<label for="url_box" class="control-label">URL of the image</label>
554				<input class="form-control" id="url_box" name="url" size="50" placeholder="Enter URL here"/> 
555			</div>
556		   </div>
557		 </div>
558	 </div>
559	 <div class="text-center head-room leg-room">
560	      <button class="btn btn-lg btn-success" name="reset" type="reset">Clear</button>
561	      <button class="btn btn-lg btn-primary" name="submit" type="submit">Generate</button>
562	 </div>
563  </form>
564    </div>
565    <div class="col-sm-5 col-md-5 col-lg-5 col-xs-12">
566<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
566
567<!-- textart.io 336x280 -->
568<ins class="adsbygoogle"
569     style="display:inline-block;width:336px;height:280px"
570     data-ad-client="ca-pub-4658013134207481"
571     data-ad-slot="2893311805"></ins>
572<script>
573(adsbygoogle = window.adsbygoogle || []).push({});
574</script>
574
575     </div>
576   </div>
577</div>
578<div class="text-center head-room bggreenshade">
579     <h4 class="text-muted">Advertisement</h4>
580	
580<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
580
581	<!-- ascii.gallery responsive -->
582	<ins class="adsbygoogle"
583	     style="display:block"
584	     data-ad-client="ca-pub-4658013134207481"
585	     data-ad-slot="7423734203"
586	     data-ad-format="auto"></ins>
587	
587<script>
588	(adsbygoogle = window.adsbygoogle || []).push({});
589	</script>
589
590</div>
591<div class="container-fluid">
592     <div class="text-center head-room">
593		<div id="disqus_thread"></div>
594		
594<script>
595		    (function() {  // DON'T EDIT BELOW THIS LINE
596			var d = document, s = d.createElement('script');
597			
598			s.src = '//textart.disqus.com/embed.js';
599			
600			s.setAttribute('data-timestamp', +new Date());
601			(d.head || d.body).appendChild(s);
602		    })();
603		</script>
603
604		<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
605    
606      </div>
607</div> <!--container-->
608
609<footer>
610 <div class="container footer-links">
611  <div class="row">
612    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
613       <h4>Tools</h4>
614       <ul>
615         <li><a href="/figlet#" title="Figlet Generator">Figlet Generator</a></li>
616         <li><a href="/cowsay#" title="Cowsay">Cowsay</a></li>
617       </ul>
618    </div>
619    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
620       <h4>API</h4>
621       <ul>
622         <li><a href="/api/figlet#" title="Figlet Text Art API">FIGlet API</a></li>
623         <li><a href="/api/cowsay#" title="Cowsay Text Art API">Cowsay API</a></li>
624         <li><a href="/api/img2txt#" title="Image to Text Art API">Image to Text art API</a></li>
625       </ul>
626    </div>
627    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
628       <h4>About</h4>
629       <ul>
630         <li><a href="/terms#" title="Terms of use">Terms of use</a></li>
631         <li><a href="/privacy#" title="Terms of use">Privacy</a></li>
632       </ul>
633    </div>
634  </div><!--/row-->
635 </div>
636  <div class="bottom-copyright">
637      <p class="text-center"><small>Copyright © 2016-2018 - <a href="/#" title="TextArt.io">TextArt.io</a> - All rights reserved.</small></p>
638  </div><!--/row-->
639</footer>
640<div class="matrix">
641  <canvas id="c"></canvas>
642</div>
643
644<script>
vendor: 339 bytes, lines 644-650
644
645  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
646  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
647  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
648  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
649
650  ga('create', '
650UA-70777850-1
vendor: 39 bytes, lines 650-652
650', 'auto');
651  ga('send', 'pageview');
652
653</script>
vendor: 1 bytes, line 653
653
654<script>
655var c = document.getElementById("c");
656var ctx = c.getContext("2d");
657
658//making the canvas full screen
659//c.height = window.innerHeight;
660//var width = (screen.width > 0) ? screen.width : window.innerWidth;
661var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
662c.height = 150;
663c.width = width;
664
665
666//unicode characters - taken from the unicode charset
667var unicode = "TextArt.io";
668//converting the string into an array of single characters
669unicode = unicode.split("");
670
671var font_size = 16;
672var columns = c.width/font_size; //number of columns for the rain
673//an array of drops - one per column
674var drops = [];
675//x below is the x coordinate
676//1 = y co-ordinate of the drop(same for every drop initially)
677for(var x = 0; x < columns; x++)
678	drops[x] = 1; 
679
680//drawing the characters
681function draw()
682{
683	//Black BG for the canvas
684	//translucent BG to show trail
685	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
686	ctx.fillRect(0, 0, c.width, c.height);
687	
688	ctx.fillStyle = "#0F0"; //green text
689	ctx.font = font_size + "px arial";
690	//looping over drops
691	for(var i = 0; i < drops.length; i++)
692	{
693		//a random unicode character to print
694		var text = unicode[Math.floor(Math.random()*unicode.length)];
695		//x = i*font_size, y = value of drops[i]*font_size
696		ctx.fillText(text, i*font_size, drops[i]*font_size);
697		
698		//sending the drop back to the top randomly after it has crossed the screen
699		//adding a randomness to the reset to make the drops scattered on the Y axis
700		if(drops[i]*font_size > c.height && Math.random() > 0.975)
701			drops[i] = 0;
702		
703		//incrementing Y coordinate
704		drops[i]++;
705	}
706}
707
708setInterval(draw, 33);
709</script>
709
710<link rel="stylesheet" type="text/css" href="/css/cookieconsent.min.css" />
711<script src="/js/cookieconsent.min.js"></script>
vendor: 1 bytes, line 711
711
712<script>
713window.addEventListener("load", function(){
714window.cookieconsent.initialise({
715  "palette": {
716    "popup": {
717      "background": "#000"
718    },
719    "button": {
720      "background": "#f1d600"
721    }
722  },
723  "showLink": false
724})});
725</script>
725
726
727</body>
728</html>
729

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.