Custom SVG Cursors with an Interactive Emitter Result

by:

Web Development

&#13
From our sponsor: From on line shops to member areas, Squarespace is anything you will need to sell just about anything.

From the custom cursor on my portfolio marvinx.com applying blurred SVG circles, I produced quite a few variants which I would like to share with you currently.

Without having heading into far too substantially element, I’d like to demonstrate some points on how I approached the generating of this set.

For the demos, the thought is to set a primary course grouping all the functions inherent to all cursors.

Then, I separate demos in different courses the place each variable is configurable: quantity of particles, hues, size, gradient, opacity, filters, radius, speed, acceleration, course, etc.

All the things is coded in native JavaScript and does not use any libraries (only d3.js if we want to type particles).

This is how particles are drawn in the Cursor class:

  drawParticles() {
    return `
      $(() => 
        if (this.strokeGradient) 
          return `
          
            
              
              
            
          `
        
      )()
      $Array(this.nbrParticles).fill().map((_,i) =>
        `
        `).be a part of('')
    `
  }

This is how just about every parameter is then configured:

export course Cursor1 extends Cursors

  constructor(index) 
    tremendous(index)
    this.speed = !isTouchDevices ? .5 : 1
    this.init()
    this.loop()
  

  setParamsCursor() 
    this.radiusCursor = 15
    this.fillCursor = getComputedStyle(doc.entire body).getPropertyValue('--primary')
    this.maxSqueeze = .6
    this.accelerator = 1000
  

  setParamsParticles() 
    this.strokeGradient = 
      idStrokeGradient : "gradient",
      coloration2 : getComputedStyle(doc.body).getPropertyValue('--primary'),
      color1 : getComputedStyle(doc.human body).getPropertyValue('--secondary'),
    
    this.strokeWidthParticles = 1.5
    this.strokeOpacityParticles = .15
    this.radiusDiff = 7
    this.radiusStart = this.radiusCursor*3
    this.nbrParticles = Math.spherical((this.diagonalWindow() + this.radiusDiff - this.radiusStart) / this.radiusDiff)
    this.transitionParticles = 
      length: 18,
      delay: !isTouchDevices ? 4 : 14,
      easing : "linear"
    
  

1. Waves outcome

2. Path outcome

3. Tube outcome

4.Mask impact

On this last demo, I use 2 times the similar superimposed movie (from Mikhail Nilov‘s attractive royalty free of charge assortment).

The initial video makes use of a grayscale filter:

  filterImageBack() 
    return
    `
      
      
    `
  

And the 2nd one is positioned inside of a mask wherever I use a duotone filter:

  filterImageCursor() 
    return 
     `
      
      
      
        
        
        
        
      
    `
  

I also thank Ghislain Auzillon, for his assist on the structure.

Hope you appreciate it!

Fullscreen Scrolling Slideshow

Leave a Reply

Your email address will not be published.