облако котиков

by avgustre

HTML

<script src="http://www.goat1000.com/jquery.tagcanvas.min.js?2.4"></script>
<canvas width="500" height="500" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li><a href=""><img width=50 height=50 src="https://img3.goodfon.ru/original/800x480/2/c2/kotyata-zhivotnye-svetlyy-fon.jpg"></a></li>
   <li><a href=""><img width=100 height=100 src="https://dl.backbook.me/full/58156a8d4a.jpg"></a></li>
   <li><a href=""><img width=120 height=120 src="http://ljshopch.com/wp-content/photos/2017/12/14f87676180b933f5c57ddb0dd30a8ad-250x150.jpg"></a></li>
   <li><a href=""><img width=100 height=100 src="https://ns328286.ip-37-187-113.eu/ew/wallpapers/800x480/36955_800x480.jpg"></a></li>
   <li><a href=""><img width=60 height=60 src="https://3.bp.blogspot.com/-wlJPY64sz-c/WfYM-ZxqzDI/AAAAAAAAAq4/p9NzB52qzQc1x0hSsC4wepqTPa5xkIhRwCLcBGAs/s640/784b8f58bf64844f7107279edfc30bed.jpg"></a></li>
  </ul>
 </canvas>

CSS

li a, li img {
  width: 50px;
  height: auto;
}

JavaScript

$(document).ready(function() {
 $('#myCanvas').tagcanvas({
    textColour : '#555', // Цвет текста
    outlineThickness : false, // Обводка у ссылок (Да, Нет)
    maxSpeed : 0.03, // Максимальная скорость
    depth : 0.9, // Глубина. От 0 до 1
   
    minSpeed: 0.06,
    minSpeed: 0.04,
		initial:  [0.04,0.04],

 });
});