WWDC - Concept

            
              function drawCircleGrey(ctx, radius, position){
  let grey = Math.round(100 + (Math.random() * 155));

  let rgbaFill   = "rgba(" + grey + ", " + grey + ", " + grey + ", 1)";
  let rgbaStroke = "rgba(" + grey + ", " + grey + ", " + grey + ", 1)";
  ctx.beginPath();
  ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle   = rgbaFill;
  ctx.strokeStyle = rgbaStroke;
  if(radius < 3){
    ctx.fillStyle   = "#CC3341";
    ctx.strokeStyle = "#CC3341";
  }
  if(radius < 2){
    ctx.fillStyle   = "#B5E3E3";
    ctx.strokeStyle = "#B5E3E3";
  }
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.stroke();
}

function hexToRGB(hex, alpha) {
    let r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

function randomIntFromInterval(min,max) {
  return Math.floor(Math.random()*(max-min+1)+min);
}

function pointIsInPolygon(p, polygon) {
    let isInside = false;
    let minX = polygon[0].x, maxX = polygon[0].x;
    let minY = polygon[0].y, maxY = polygon[0].y;
    for (let n = 1; n < polygon.length; n++) {
        let q = polygon[n];
        minX = Math.min(q.x, minX);
        maxX = Math.max(q.x, maxX);
        minY = Math.min(q.y, minY);
        maxY = Math.max(q.y, maxY);
    }
    if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
        return false;
    }
    let i = 0, j = polygon.length - 1;
    for (i, j; i < polygon.length; j = i++) {
        if ( (polygon[i].y > p.y) != (polygon[j].y > p.y) &&
                p.x < (polygon[j].x - polygon[i].x) * (p.y - polygon[i].y) / (polygon[j].y - polygon[i].y) + polygon[i].x ) {
            isInside = !isInside;
        }
    }
    return isInside;
}


function getBoundingBoxPolygon(points){
  let minX = null;
  let maxX = null;
  let minY = null;
  let maxY = null;
  for(let i = 0; i < points.length; i++) {
      let x = points[i].x;
      let y = points[i].y;
      if(minX == null){
        minX = x; maxX = x; minY = y; maxY = y;
      }
      minX = Math.min(minX, x);
      maxX = Math.max(maxX, x);
      minY = Math.min(minY, y);
      maxY = Math.max(maxY, y);
  }

  let width  = maxX - minX;
  let height = maxY - minY;

  return {
    x: minX,
    y: minY,
    width: width,
    height: height,
  }
}

function addParticle(){
  // Externa points
  let vector = {
    x: Math.random()*WIDTH,
    y: Math.random()*HEIGHT
  }
  let vector_check = {
    x: vector.x - offsetX,
    y: vector.y - offsetY
  }

  if( !pointIsInPolygon(vector_check, apple) && !pointIsInPolygon(vector_check, leaf) ){
    drawCircleGrey(canvas, Math.random()*10, {
      x: vector.x,
      y: vector.y
    })
  }
}

//
let WIDTH  = $(window).width()
let HEIGHT = $(window).height()
let leaf  = [{x: 179.9, y: 34.8 }, {x: 242.7, y: 0 }, {x: 222.1, y: 63.9 }, {x: 162.5, y: 92 } ];
let apple = [{x: 165.8, y: 114.8 }, {x: 194.3, y: 105.5 }, {x: 237.1, y: 96.2 }, {x: 297.4, y: 116.2 }, {x: 315.5, y: 136.2 }, {x: 293.8, y: 154 }, {x: 272.2, y: 212 }, {x: 299.1, y: 275.4 }, {x: 326.1, y: 293.4 }, {x: 300.9, y: 346.4 }, {x: 237.5, y: 399.4 }, {x: 204.9, y: 391.5 }, {x: 171.4, y: 383.7 }, {x: 134.9, y: 391.8 }, {x: 105.2, y: 400 }, {x: 35.2, y: 339.6 }, {x: 0, y: 218.6 }, {x: 30.7, y: 128.1 }, {x: 96.3, y: 97.3 }, {x: 136.5, y: 106 } ]

let tela = document.createElement('canvas');
    tela.width = $(window).width();
    tela.height = $(window).height();
    $("body").append(tela);

let canvas = tela.getContext('2d');
let leafBB  = getBoundingBoxPolygon(leaf);
let appleBB = getBoundingBoxPolygon(apple)
let offsetX = WIDTH/2 - appleBB.width/2
let offsetY = HEIGHT/2 - (appleBB.height+leafBB.height)/2



setInterval(function(){
  for(let i=0;i<8;i++){
    addParticle()
  }
}, 1)