CODEWITHSUNDEEP
javascripthtmlcsssvg
gvdltubdlpwfsgmpx
gvdltubdlpwfsgmpx

Reputation: 37

is it possible to change stroke of different parts of SVG using CSS or Javascript?

this impressed me a lot (complete JS code in link) : https://codepen.io/al-ro/pen/BaaBage

<body>
  <canvas id="canvas" width="1400" height="600"></canvas>
</body>
<style>
body {
  background-color: #000;    
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
}
</style>

but it's hard for me to make something same as this , so I want to know can I use heart-shaped SVG and changing it's stroke color like that ? like in clockwise direction change its stroke color.

is there anyway to make such thing ?

Upvotes: 0

Views: 64

Answers (1)

Hugzey
Hugzey

Reputation: 21

So short answer yes, via the JavaScript/GLSL.

Long answer which is no. Assuming you don't know much cg/GLSL.

This uses shadertoy's libraries for implementing GLSL (OpenGL Shader Language) in the web browser. It's quite advanced for someone new to the whole thing but there's some great tutorials linked on their website if you dig around.

What you want to do, would probably take you some time to pick up. You'd be modifying the part of code that specifies the length of the lines, to also modify the size based on a lerp between the start/end. This can be found at line 114 in the getSegment function that said, it's a sizeable refactor/enhancement too.

Try asking this in the GLSL or CG sections too and someone may be willing to give you some guidance.

Upvotes: 1

Related Questions