Icon Patterns

Include animated CSS icon patterns in your background

Append animated icons in the background of any HTMLElement. Just import any iconic font set that you prefer and the library will automatically inject icons with random animations beneath your HTMLElement. You are currently viewing an example in the top section.

Import Dependencies

Import the font icons you want in your head. In this example we are using Ionicons.com.

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.cssfrel="stylesheet" type="text/css" >

Load the css assets in the head section.

<link href="https://unpkg.com/icon-patterns/dist/icon-patterns.min.css" rel="stylesheet" type="text/css">

Load the javascript assets before closing the body tag.

<script src="https://unpkg.com/icon-patterns/dist/icon-patterns.min.js" ></script>

Setup DOM

You can use any selectors to define your target (You can use jQuery if you want).

<div id="target"> We've created Icon Patterns </div>

Configure positions and count

Include the name prefixes as described in the font icon set that you have imported.

new IconPatterns(document.getElementById('target'), {
  color: '#FFFFFF',
  icons: {
    'ion-ios-bell-outline': {
      count: 10,
      sizeVariation: [10, 25],
    },
    'ion-ios-cloud-outline': {
      count: 15,
      sizeVariation: [5, 20],
    },
    'ion-ios-lightbulb-outline': {
      count: 10,
      sizeVariation: [5, 35],
    },
  }
}).draw();

SEE CODE

AUTHORS

We've created Icon Patterns.

Include animated CSS icon patterns in your background