Drag and Drop Coloring Help

1

Hey guys,

I’ve got a pretty good handle on working with dragging and dropping images and now I’m starting a project that I need to do this with colors. I came across this Codepen and was pretty blown away. It is amazing stuff.

My question is this:

Notice how when you drag a color from the left to the right side image and drop it the color changes? How did they create that outline that is changing? I understand where the actual image is coming from and played around with their code for a while but can not for the life of me understand it.

I believe its coming from “path” and is located in the “d=” but am unsure of how they came to those numbers. What I’m working on will not be a phone case and I would like to learn how to do this myself.

Any help is greatly appreciated.

CodePenSource: http://codepen.io/osublake/pen/VmgNJB

HTML FROM CODEPEN BELOW

  <svg id="phone-svg" viewBox="0 0 1335 2132">        
    <defs>
      <mask id="phone-mask" maskUnits="userSpaceOnUse">
        <path id="phone-mask-path" d="M390.001733,1932.5 C390.001733,1932.5 565.999988,1931.5 586.05712,1931.5 C606.114252,1931.5 617.023773,1915.5 620.828278,1915.5 C660.021292,1915.5 735.169897,1915.5 737.998019,1915.5 C740.826141,1915.5 746.051941,1931.5 778.812117,1931.5 C811.572292,1931.5 971.998267,1932.5 971.998267,1932.5 C1043.24228,1932.5 1106,1869.76062 1106,1797.49805 L1106,338.501954 C1106,255.587048 1040.06342,200.5 978.998267,200.5 L903.563583,200.5 C877.936549,200.5 860.246162,215.5 860.246162,215.5 L797.920589,215.5 C797.920589,215.5 776.386439,200.5 760.492377,200.5 C744.598316,200.5 379.001733,200.5 379.001733,200.5 C307.757721,200.5 250,260.459622 251,340.704544 L251,604.642372 L258,630.93573 L258,745.743147 L251,769.688698 L251,865.914447 L258,887.652675 L258,1128.96869 L251,1148.60567 L252,1791.49805 C252,1878.48584 318.756326,1932.5 390.001733,1932.5 Z" fill="#fff" stroke="#fff" stroke-width="4" />            
      </mask>          
    </defs>        
    
    <g mask="url(#phone-mask)">        
      <rect id="background" fill="#eaeaea" width="100%" height="100%" />        
      <g id="ripple-layer"></g>
    </g>
    
    <image x="1" y="1" width="1333px" height="2130px" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/phone.png" />                
    
    <path id="phone-outline" d="M390.001733,1932.5 C390.001733,1932.5 565.999988,1931.5 586.05712,1931.5 C606.114252,1931.5 617.023773,1915.5 620.828278,1915.5 C660.021292,1915.5 735.169897,1915.5 737.998019,1915.5 C740.826141,1915.5 746.051941,1931.5 778.812117,1931.5 C811.572292,1931.5 971.998267,1932.5 971.998267,1932.5 C1043.24228,1932.5 1106,1869.76062 1106,1797.49805 L1106,338.501954 C1106,255.587048 1040.06342,200.5 978.998267,200.5 L903.563583,200.5 C877.936549,200.5 860.246162,215.5 860.246162,215.5 L797.920589,215.5 C797.920589,215.5 776.386439,200.5 760.492377,200.5 C744.598316,200.5 379.001733,200.5 379.001733,200.5 C307.757721,200.5 250,260.459622 251,340.704544 L251,604.642372 L258,630.93573 L258,745.743147 L251,769.688698 L251,865.914447 L258,887.652675 L258,1128.96869 L251,1148.60567 L252,1791.49805 C252,1878.48584 318.756326,1932.5 390.001733,1932.5 Z" fill="transparent" stroke="black" stroke-width="5" stroke-opacity="0" />
    
  </svg>
</phone-container>
2

My guess … They would have prebuilt those numbers from an external source - perhaps an SVG/path editor (Illustrator perhaps?) from which they could extract the path information. Use a product image of the phone case, build a path around it and export as SVG path, SVG is text, open the file and extract the path information needed (that would be an off the top of my head approach - I’ve never done exactly that).

https://www.bing.com/search?q=export+svg+path&qs=n&form=QBRE&sp=-1&pq=export+svg+path&sc=1-15&sk=&cvid=58911A2193F041DA97156F00FDC99BCC

They use a plugin for morphing path points and do some fun raycasting for hit testing so that they can get a exact idea of when the dragged item intersects with the path outline.

Neat stuff!

1 Like
3

I appreciate the help. It seems like something that I’m going to have to play around with but felt like picking everyone else’s brains for info. I’ll look into that link and see what I can find out.

Thank you!

4

If anyone else gets stuck on this these links are pretty good:

http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

1 Like
5

@TheRealAlGore

Nice article - Good find!