Comments (1)
botelho
commented on June 12, 2024
1
First, you need to change the values of the SVG width/height and viewbox. Also the cx/cy (half of what's set for the width/height) and radius parameters of the circle inside the SVG.
<svg class="cursor" width="280" height="280" viewBox="0 0 280 280">
<defs>
<filter id="filter-1" x="-50%" y="-50%" width="200%" height="200%"
filterUnits="objectBoundingBox">
<feTurbulence type="fractalNoise" baseFrequency="0.02 0.15" numOctaves="3" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="0" in="SourceGraphic" in2="warp" />
</filter>
</defs>
<circle class="cursor__inner" cx="140" cy="140" r="50"/>
</svg>
Then in cursor3.js you need to update the radius too. On line 34,
radius: {previous: 50, current: 50, amt: 0.14}
change 50 to the new radius value and on line 88 and 92
this.renderedStyles['radius'].current = 120;
...
this.renderedStyles['radius'].current = 50;
change the from/to values for the radius when hovering an element.
Hope it helps!
from animatedcustomcursor.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animatedcustomcursor.