Jump to content
TirochH

Draggable spin - SVG instead of PNG

Recommended Posts

Hi TirochH  :)

 

When you want to use an image as part of your SVG, I'd recommend using it as a pattern. When you let Adobe Illustrator export the image, you get a crazy big data string in the SVG. To build a rotating control dial, it's really just a series of circles with varying width strokes and then the pattern for the texture. You can define your pattern in the <defs> something like this:

  <pattern id="grid" patternUnits="userSpaceOnUse" width="800" height="800">
    <image xlink:href="https://linkToYourImageWillBeHere" x="0" y="0" width="800" height="800" />
  </pattern>

and then use it as the fill for the main circle like this:

<circle r="400" fill="url(#grid)" cx="400" cy="400" />

Here's a demo to get you started:

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

You can see that is pretty close to what your SVG looked like, but now you have the ability to change the stroke widths and colors to your liking.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2

Share this post


Link to post
Share on other sites

Thank you very much. I like your Vektor Grafik.

 

I adapt your codeine.

 

see: 

See the Pen ZKGwdK?editors=0010 by TirochH (@TirochH) on CodePen

 

I want change the color of the wheel, dependent of the rotation. Can you help me.

 

Hans

Share this post


Link to post
Share on other sites

Hello TirochH

 

Be careful when using the hwb() (Hue-Whiteness-Blackness) color model, since it is still experimental and not even part of the CSS1, CSS2, or CSS3 spec.

 

However hwb() color model was put forward in the CSS4 spec as Draft Status, but is still experimental. So all modern browsers will just ignore the hwb() color in the browser. Your better off just using rgb(), rgba(), hsl(), or hsla() if you want true cross browser compatibility.

 

You can see that modern browsers will just ignore your applying of hwb() in your lasts tween on Line 83 in your codepen, since it is ignored and not a valid color model.

 

See <color> value: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

 

Happy Tweening! :)

  • Like 1

Share this post


Link to post
Share on other sites

As with all things, there would be several ways to animate the main stroke color based on the rotation. I would take a simple approach and create another timeline or tween that animates the stroke color(s) you want and then update that tweens progress based on the rotation.

 

I've updated my demo to reflect this addition.

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3

Share this post


Link to post
Share on other sites

Thank you, it runs.

 

For your info: The result of the knob: 

See the Pen eWpWJm by TirochH (@TirochH) on CodePen

 

Annother questions:

 

1. when I start from rotation x, how I can "initialize", that at start I have the right color ?

2. when I want go from color (rotation 0) "yellow orange red", what I have to do?

3. Alternative  to the color circle;

      - round circles around the knob 
     - init state (rotation = 0): white or transparent

     -  state by rotation   = x, all circles from 0 to x, are on (color, color depending of  rotation)

 

gui_volume_knob_psd_by_drx_design-d4gxyk

 

Hans

Share this post


Link to post
Share on other sites

1. when I start from rotation x, how I can "initialize", that at start I have the right color ?

 

I'm not sure I understand the question. The stroke color in my demo doesn't have to be initialized. It would just start at whatever color you choose in the SVG. In the case of my demo, that is green.

 

2. when I want go from color (rotation 0) "yellow orange red", what I have to do?

 

If you look at my demo, you'll see that there is a timeline with a name of 'tween'. It consists of two tweens that change the stroke from green (start color) to yellow and then yellow to red. That timelines progress is updated by linking it to the rotation of the dial in my updateData() function. 

 

3. Alternative  to the color circle;
      - round circles around the knob 
 
You could certainly create the dial that way instead of a solid stroke around the circle. You'd just have to trigger the individual circles around the knob depending on the rotation of the dial, but the basic mechanics work the same way. You'd just need to check the dial rotation and add some logic to trigger the little circles animations.
 
Happy tweening.
:) 
  • Like 3

Share this post


Link to post
Share on other sites

HI,

 

1. the starting position (position; 0) has not the defined color. Based on your logic, the color should be green. You  are right "nothing is initialized.

Bur how you initialize?        

2. how you select the. stroke, that I get the color from yellow to red.

 3. have you a demo ?

 

Hans

Share this post


Link to post
Share on other sites

The starting color is set in the SVG. In my demo that is line 10 of the HTML:

<circle class="ring" r="380" fill="none" stroke="#598527" stroke-width="40" cx="400" cy="400" />

The tweens in the timeline animate the ring color. See how the .ring class is selected and animated here?

var tween = new TimelineMax({ paused:true});
tween.to(".ring", 1, {stroke:"#cfc620", ease:Linear.easeNone});
tween.to(".ring", 1, {stroke:"#790000", ease:Linear.easeNone});

The demo is the same link as the other post:

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 3

Share this post


Link to post
Share on other sites

My problem is, that my new knob from my posting (2;28 PM) is no SVG.  Its build only with HTML "<DIV>"s.

 

See the link to the codepen.

 

Hans

Share this post


Link to post
Share on other sites

okay - you're creating a bunch of divs with your cr_c() function. Line 29 is the div with the blue border:

cr_c(c,800,400,40,"#3b7486","");

If you want a green to start, just change that hex value. After that, it works the same way as my SVG demo. The difference will be that you need to target that div and tween the borderColor instead of the stroke.

 

Happy tweening.

:) 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.