I'm building a Landing Page in react.js and I want to create a custom shape similar to this image {see below}. As of now I have created some simple shapes and now I want to achieve new level in css by creating this shape. Please help me.
Here I am also sharing SVG of this image SVG link
here is png format as well.
For doing such complex shapes I would recommend using some drawing tool like Photoshop or Illustrator, then you export as SVG and use it.
Related
I was wondering if there is a mean to add a graph made with Highcharts into a draw2d canvas. I tried to use the class made to import external SVG SVGFigure, but it seems like the SVG is too complex to be used with this class according to this and my test.
draw2d.SVGFigure;
Thank you for your suggestions :)
I've figured out a solution, converting the svg to an image and use SetFigure class from draw2d to insert it in the canvas.
draw2d.SetFigure;
You can find an example here of the implementation with canvg or with vanilla js.
I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.
I am using the GOJS javascript framework to work with flowcharts. I have a pretty huge flowchart that isn't fully visible in the viewport. There is a scrollbar to view the hidden content in the canvas.
I am trying to export the canvas as an image. But I am only able to export the visible part in the canvas and not the full flowchart. I have tried using canvas.toDataURL() and the GOJS diagram.makeImageData() APIs, but haven't been successful.
Could the JS experts here please help me out? Thanks so much...
You should not be touching the Canvas element inside the Diagram's DIV element.
Have you read http://gojs.net/latest/intro/makingImages.html ? You need to pass some options to Diagram.makeImageData.
I can create a transparent image with several images using gimp and use http://www.spritecow.com/ to get the image coordinates for sprite.
what is the best way to create svg sprite ? I have several svgs - and I would like to create a single svg sprite image and then get the coordinate to create the individual classes.
I am on windows machines - so I am hoping for a online solution.
thanks
may I suggest that you look at icomoon.com/app. The service is very similar to your spritecow.
The better part is you take individual svg and upload it - and then download the sprite.
I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!
This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478