SVG Bubble Background Generator For Angular – jlg-bubble

Description:

jlg-bubble is an Angular directive that generates nice SVG background with static bubbles.

Installation:

# NPM
$ npm install jlg-bubble  --save

Usage:

<div jlg-bubble="cfg">
</div>

<script>
(function () {
  'use strict';

  const app = angular.module('main', ['jlg-bubble']);

  app.run(($rootScope) => {
    $rootScope.cfg = {
      count: 31,
      colors: ['blue', 'red', 'green', 'yellow'],
      opacity: 0.05,
      radius: 50,
      move: false,
    };
    $rootScope.$watch('color', () => {
      $rootScope.cfg.colors = [];
      for (const color in $rootScope.color) {
        if ($rootScope.color[color]) {
          $rootScope.cfg.colors.push(color);
        }
      }

    }, true);
  });
})();
</script>

Preview: