cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                <div id="container"></div> 
<svg version="1.1" id="svgElement" xmlns="http://www.w3.org/2000/svg" style="display:none;" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="636.87px" height="193.392px" viewBox="0 0 636.87 193.392" enable-background="new 0 0 636.87 193.392"
	 xml:space="preserve">
<path d="M101.171,24.342c3.355-0.768,6.531-1.149,9.526-1.144c2.993,0.005,5.47,0.423,7.431,1.252l-15.387,116.578L81.68,140.99
		l6.134-52.33L85.8,89.276c-9.504,2.77-18.128,5.491-25.876,8.16l-2.199,17.03c-2.511,18.268-11.098,27.389-25.755,27.363
		c-5.265-0.01-9.342-1.59-12.225-4.746c-2.886-3.153-4.323-7.208-4.314-12.164c0.02-11.045,7.832-20.993,23.438-29.844l8.02-67.192
		c1.962-1.337,4.546-2.47,7.749-3.393c3.2-0.923,6.298-1.382,9.294-1.376c2.993,0.005,4.955,0.062,5.884,0.166l-8.164,61.618
		c6.3-2.259,14.255-4.671,23.861-7.235l3.718-0.922l5.975-50.007C95.826,25.907,97.814,25.11,101.171,24.342z M26.275,122.617
		c-0.006,3.305,1.486,4.958,4.481,4.963c1.65,0.003,2.735-0.484,3.255-1.465c0.517-0.979,0.906-1.803,1.166-2.475
		c0.257-0.67,0.492-1.572,0.702-2.709c0.208-1.134,0.365-2.141,0.47-3.019c0.103-0.875,0.209-2.037,0.316-3.483
		c0.104-1.445,0.21-2.579,0.316-3.406l0.313-2.323C29.955,113.746,26.283,118.385,26.275,122.617z"/>
	<path d="M157.036,87.082c-5.996,4.224-9.001,10.514-9.016,18.876c-0.009,5.265,1.864,10.224,5.625,14.876
		c3.759,4.653,10.13,6.987,19.112,7.003c8.981,0.017,17.504-3.012,25.567-9.09c8.064-6.075,14.166-12.723,18.309-19.943l5.248,9.456
		c-13.358,22.584-31.911,33.855-55.654,33.812c-11.769-0.021-21.727-3.214-29.87-9.578c-8.145-6.364-12.208-13.829-12.193-22.399
		c0.027-14.968,6.706-25.795,20.035-32.483c-4.43-5.479-6.637-11.883-6.624-19.214c0.018-9.601,4.188-17.852,12.511-24.754
		c8.322-6.9,17.956-10.342,28.899-10.322c10.941,0.02,19.376,2.822,25.304,8.408c5.925,5.586,8.881,12.922,8.864,22.006
		l-14.711-0.027c0.112-5.574-1.352-9.783-4.39-12.628c-3.042-2.844-7.271-4.272-12.69-4.282c-5.42-0.01-10.302,1.943-14.645,5.858
		c-4.861,4.225-7.295,9.176-7.305,14.853c-0.011,5.679,1.529,10.586,4.619,14.72c10.324-1.22,18.169-0.533,23.534,2.056
		c3.3,1.554,4.948,4.011,4.942,7.364c-0.006,3.356-1.895,5.702-5.665,7.036c-3.772,1.336-8.289,1.999-13.554,1.989
		S162.606,89.469,157.036,87.082z"/>
	<path d="M255.139,127.833c1.134,0.416,2.399,0.623,3.792,0.626c1.394,0.002,2.735-0.15,4.027-0.457
		c1.29-0.308,2.479-1.053,3.565-2.239c1.086-1.184,1.939-2.138,2.561-2.86c0.621-0.72,1.398-2.32,2.332-4.796
		c1.14-2.887,2.541-6.964,4.203-12.226c4.329,4.034,6.902,7.085,7.727,9.15c-4.989,18.162-13.73,27.229-26.22,27.207
		c-5.885-0.011-13.364-3.843-22.433-11.5c-4.764,7.632-12.153,11.437-22.165,11.419c-4.44-0.008-8.437-1.511-11.993-4.512
		c-3.556-3-5.329-7.288-5.319-12.863c0.01-5.575,1.876-10.14,5.6-13.695c3.723-3.555,8.526-5.327,14.411-5.316
		c1.135,0.002,2.734,0.109,4.8,0.319l2.204-19.663c-4.546,1.438-11.569,3.284-21.07,5.537l0.021-11.614
		c7.746-1.741,15.183-3.689,22.31-5.844l3.143-25.235c2.199-17.236,10.988-25.841,26.372-25.813
		c6.09,0.011,10.965,1.699,14.625,5.059c3.657,3.363,5.482,8.089,5.471,14.179c-0.026,14.661-9.494,26.463-28.402,35.41
		l-4.712,36.538l-0.158,1.548C247.456,123.018,252.559,126.899,255.139,127.833z M206.986,123.719
		c-0.006,3.097,1.745,4.649,5.256,4.655c3.407,0.006,5.527-3.034,6.365-9.125c-1.96-0.829-3.792-1.246-5.495-1.249
		c-1.704-0.003-3.151,0.562-4.339,1.695C207.584,120.831,206.989,122.17,206.986,123.719z M261.485,43.913
		c0.008-4.336-1.796-6.507-5.408-6.514c-4.336-0.008-7.082,5.097-8.235,15.316l-1.571,12.23
		C256.398,58.978,261.471,51.965,261.485,43.913z"/>
	<path d="M326.989,127.963c1.134,0.416,2.399,0.624,3.792,0.626s2.735-0.15,4.027-0.457c1.29-0.308,2.479-1.053,3.565-2.239
		c1.086-1.184,1.939-2.138,2.561-2.86c0.621-0.72,1.398-2.32,2.332-4.796c1.14-2.887,2.541-6.964,4.203-12.226
		c4.329,4.034,6.902,7.085,7.727,9.15c-4.989,18.162-13.73,27.23-26.22,27.207c-5.885-0.011-13.364-3.843-22.433-11.5
		c-4.764,7.632-12.153,11.438-22.165,11.419c-4.44-0.008-8.437-1.511-11.993-4.512c-3.556-3-5.329-7.288-5.319-12.863
		c0.01-5.575,1.876-10.14,5.6-13.694c3.723-3.555,8.526-5.328,14.411-5.317c1.135,0.002,2.734,0.109,4.8,0.319l2.204-19.663
		c-4.546,1.438-11.569,3.284-21.07,5.537l0.021-11.614c7.746-1.74,15.183-3.689,22.31-5.844l3.143-25.236
		c2.199-17.236,10.988-25.841,26.372-25.813c6.09,0.011,10.965,1.699,14.625,5.059c3.657,3.363,5.482,8.089,5.471,14.179
		c-0.026,14.661-9.494,26.463-28.402,35.411l-4.712,36.537l-0.158,1.548C319.306,123.148,324.409,127.029,326.989,127.963z
		 M278.837,123.85c-0.006,3.097,1.745,4.648,5.256,4.655c3.407,0.006,5.527-3.034,6.365-9.125c-1.96-0.829-3.792-1.246-5.495-1.249
		c-1.704-0.003-3.151,0.563-4.339,1.695C279.435,120.961,278.839,122.301,278.837,123.85z M333.336,44.043
		c0.008-4.336-1.796-6.507-5.408-6.514c-4.336-0.008-7.082,5.097-8.235,15.315l-1.571,12.23
		C328.249,59.108,333.321,52.096,333.336,44.043z"/>
	<path d="M482.241,79.466c-2.381,2.577-6.307,4.866-11.782,6.87c-5.477,2.003-9.839,3.001-13.091,2.996s-5.651-0.112-7.2-0.323
		c-2.609,15.275-9.214,28.012-19.813,38.213c-10.602,10.201-22.896,15.289-36.883,15.264c-13.99-0.025-24.513-4.38-31.566-13.065
		c-7.057-8.685-10.572-19.996-10.546-33.933c0.016-9.083,1.426-17.934,4.229-26.55c2.803-8.614,6.662-16.272,11.579-22.975
		c4.915-6.701,11.094-12.083,18.535-16.149c7.44-4.063,15.211-6.089,23.317-6.074c8.103,0.015,14.758,1.861,19.966,5.533
		c5.206,3.676,7.805,8.764,7.793,15.268c-0.009,4.955-1.747,9.366-5.212,13.231c-3.467,3.865-8.244,5.792-14.334,5.781
		c-3.201-0.006-6.038-0.81-8.513-2.416c-2.475-1.604-3.709-4.162-3.703-7.672c0.003-1.65,0.417-3.096,1.247-4.333
		c0.828-1.237,1.654-2.01,2.482-2.318l1.395-0.617c-0.007,4.13,1.639,6.197,4.944,6.204c1.548,0.002,2.89-0.537,4.029-1.619
		c1.137-1.082,1.758-2.293,1.865-3.636c0.104-1.34,0.055-2.4-0.149-3.175c-0.207-0.775-0.616-1.678-1.234-2.712
		c-1.442-2.582-4.484-3.879-9.129-3.888c-6.093-0.011-11.878,2.87-17.359,8.641c-5.484,5.773-9.857,13.198-13.126,22.275
		c-3.269,9.08-4.911,18.368-4.929,27.865c-0.014,7.951,1.262,15.023,3.833,21.223c1.438,3.308,3.551,5.917,6.335,7.831
		c2.784,1.917,6.136,2.876,10.061,2.884c6.504,0.012,12.316-2.712,17.436-8.176c5.121-5.461,8.899-12.062,11.341-19.801
		c2.438-7.738,3.667-15.58,3.681-23.531l0.003-1.858c-0.307-1.136-0.46-2.22-0.458-3.253c0.009-4.956,1.771-8.719,5.286-11.295
		c2.273-1.646,5.115-2.468,8.522-2.462c0.929,0.002,2.424,0.159,4.49,0.473c2.063,0.314,3.507,0.781,4.333,1.402
		c-2.168,0.1-3.849,0.82-5.037,2.159c-1.19,1.34-1.787,3.146-1.791,5.417c-0.004,2.272,1.022,4.391,3.085,6.354
		c2.884,2.793,7.399,4.195,13.542,4.206c6.141,0.011,12.521-2.506,19.139-7.553L482.241,79.466z"/></svg>

            
          
!
            
              #container{
  width:100%;
  height:100%;
  display:block;
}
.sketch{
  width:100%;
  height:100%;
  display:block;
}
            
          
!
            
              class TypePath
  STEP_SIZE   :  2

  ctx         :   null
  lines       :   []
  paths       :   []

  constructor :   (@svg) ->
    for childNode in @svg.childNodes
      if childNode.tagName == 'path'
        @lines.push childNode
    @getPoints()

  getPoints   :   () ->
    for line in @lines
      path = {}
      totalLength = path.totalLength = ~~ line.getTotalLength()
      pathData = []

      while totalLength > 0
        point = line.getPointAtLength totalLength
        pathData.push point
        totalLength -= @STEP_SIZE

      path.pathData = pathData
      @paths.push path

  getPaths    :   () ->
    return @paths
 
class PhysicsDemo
  AVOID_MOUSE_STRENGTH : 5000

  engine      : new Physics()
  sketch      : Sketch.create(container : document.getElementById 'container')
  gui         : new dat.GUI()
  
  yOffset     : 100
  xOffset     : 300

  renderer    : null

  constructor : ( @paths )->
    @engine.integrator = new Verlet()

    @avoidMouse = new Attraction()
    @createParticles()
    @setupGUI()

    @sketch.draw = @draw
    @sketch.mousemove = @onmousemove


  setupGUI        : () ->
    @gui.add @, 'AVOID_MOUSE_STRENGTH', 5000, 15000

  createParticles : () ->
    count = 0
    for path in @paths
      for pathData in path.pathData
        min_mass = 1
        max_mass = 20
        particle = new Particle max(min_mass, max_mass)
        _buffer = 100
        pos_x = max(random(pathData.x - _buffer),random(pathData.x + _buffer)) + (@sketch.width/2) - @xOffset
        pos_y = max(random(pathData.y - _buffer),random(pathData.y + _buffer)) + (@sketch.height/2) - @yOffset
        position = new Vector pos_x, pos_y

        @count++

        particle.setRadius random 5
        particle.moveTo position

        pull = new Attraction()
        pull.target.x = pathData.x + ((@sketch.width/2) - @xOffset)
        pull.target.y = pathData.y + ((@sketch.height/2) - @yOffset)
        pull.strength = 2800

        particle.behaviours.push @avoidMouse, pull

        @engine.particles.push particle

    @avoidMouse.setRadius 100
    @avoidMouse.strength = -@AVOID_MOUSE_STRENGTH

  draw            : () =>
    @engine.step()

    @avoidMouse.strength = -@AVOID_MOUSE_STRENGTH

    for particle in @engine.particles
      @sketch.beginPath()
      @sketch.arc particle.pos.x, particle.pos.y, particle.radius, 0, Math.PI * 2
      @sketch.fill()

  onmousemove     : () =>
    @avoidMouse.target.x = @sketch.mouse.x
    @avoidMouse.target.y = @sketch.mouse.y

window.onload = (=> 
  tp = new TypePath document.getElementById 'svgElement'
  _paths = tp.getPaths()
  console.log 'path'
  PhysicsDemo = new PhysicsDemo( _paths )
)

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console