I made this cursor animation recently, and people seem to like it :)
It is a nice-looking piece, but it's also quite simple and takes only 2KB of ...
For further actions, you may consider blocking this person and/or reporting abuse
Nicely done. Especially with the smooth quadratic curve.
You could consider moving a lot of this into a class in order to keep it out of global scope. Also, though it works, I think it's a little awkward to call functions before they are defined. I like to place my event listeners all together at the end of a code block.
Hey Rich! It all makes perfect sense, thank you for the code review! I do have a tendency to concentrate on the visual aspect so it's always nice to have someone to take a look at my JS
Great Project 👍
Thanks man
Nice project
amazing
amazing job
Soooooo satisfying! I can spend hours playing around with this!
@uuuuuulala, so have very tasteful people in your life :)
I discovered your "Damn Satisfying" (and it really is) Curly Cursor creation on CodePen, then had to hunt down my DEV login info, just so I could comment on what beautiful art/code you've made. AND- thank you for also taking the time to write up the tutorial!
Omg @lorenmcclaflin thank you so much!
It took me a bit of time to notice your comment but I'm soooo happy to see it now :) Really made my day, thanks man
Gyansetu's Programming courses are a fantastic way to kickstart your coding journey. With experienced instructors and a variety of programming languages to choose from, it's a great platform for honing your skills and embracing the world of coding. Highly recommended!
For more info:- gyansetu.in/blogs/70-power-bi-mcq-...
My first spam comment here on dev.to! Taste of success 😄
It's so icky when ppl promote themselves using 3rd-person voice.
Very nice, thank you
Look at processing.js...
I don't think processing.js has been actively maintained for quite some time. That was replaced by p5.js but TBH I think they tried too hard to match processing's Java based syntax in js; which I found rather limiting.
For anything canvas based my preference these days is pixiJS :)
PixiJS is indeed a great library
May I also suggest PaperJS
this is the uprgarted version of that code in only html
<!DOCTYPE html>
Interactive Cursor Tutorial
<br>
/* Resetting default styles and adding custom styles <em>/<br>
body,<br>
html {<br>
padding: 0;<br>
margin: 0;<br>
overscroll-behavior: none;<br>
background-color: #111; /</em> Dark background color <em>/<br>
color: #fff; /</em> Text color /<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> / Styling for the tutorial link */
.links {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 18px;
font-family: sans-serif;
background-color: white;
padding: 10px;
}
</style>
</code></pre></div>
<p></head></p>
<p><body><br>
<!-- Canvas element for the interactive cursor animation --><br>
<canvas></canvas></p>
<div class="highlight"><pre class="highlight plaintext"><code><!-- Tutorial link with icon -->
<div class="links">
<a href="dev.to/uuuuuulala/coding-an-intera..." target="_blank">tutorial<img class="icon" src="https://ksenia-k.com/img/icons/link.svg"&gt;&lt;/a&gt;
</div>
<!-- JavaScript for interactive cursor animation -->
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
</script>
</code></pre></div>
<p></body></p>
<p></html></p>
<p>this is only html but fully working try thanks me latter</p>
How would you format this so it is ready to use? I am completely new to code and don't even know where to start!
May I know if there is any way I can change the colour of the ink? Sorry I am a beginner
it's very simple to do, just add a
strokeStyle
property to the Canvas context, for exampleLearn more about styles and colors here
Thank you you are amazing
I am using Wix and have been trying to add this to my website for the past 4 hours... completely new to code and no clue where to start. How would this be formatted for HTML? Thank you!
Hmm, am I doing something wrong? Tested it on a website. As soon as I scroll down, the ink line stays more and more away from the cursor.
I see what you mean, Andi
Your issue is not about the animation itself but rather about getting correct pointer position.
pointer.x
andpointer.y
properties should be calculated ** relative** to the<canvas>
element.In the original demo,
<canvas>
has a full-screen size, and<canvas>
position is set tofixed
(see CSS code). In this setup, we can track cursor position simply usinge.pageX
ande.pageY
properties (see event listeners in the JS code).But if
<canvas>
position isn't fixed and there are other HTML elements above the animation, you need to take into account the top offset of<canvas>
itselfThere're different ways to do so, for example
You can google "pointer position relative to element" to learn about the topic