I would like to build a scheme in comic style.

I found the CSS markup that I like (https://codepen.io/mp/pen/ldAFs)

enter image description here

It seems like the following tags do the job

border-width: 3px 4px 3px 5px;
border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
transform: rotate(2deg);

Then I tried to draw the blocks in SVG format by using InkScape with changing style settings via XML editor. However, when I add one of the attributes (transform) and press Set, it disappears, it seems like SVG doesn't support all CSS attributes.

My question is what's the easiest way to build such a scheme?

  • Try to rotate a rectangle and see what that gives in the XML editor. – Moini Dec 6 '18 at 13:04
  • 2
    You can't expect SVG to work just like HTML + CSS does, it's a different technology. SVGs don't have borders like the other does. It would be best to recreate these in a vector editor like Inkscape. – Zach Saucier Dec 6 '18 at 13:13

To create a rectangle(comic style) as shown in your image, first create a path something like the one shown in image below:

enter image description here

Now follow the steps given below:

  1. Select this path(the one shown above) and copy it (or hit Ctrl+C)
  2. Select Bazier curve and straight lines tool (or hit Shift+F6 or B)
  3. Make sure your Tool Control Bar is visible (View>Show/Hide>Tool Control Bar)
  4. Form Tool Control Bar>Mode select create a sequence of paraxial line segment and from Tool Control Bar>Shape select Bend from clipboard, as shown in image below(Note that I'm using dark theme so your Inkscape may look different):

enter image description here

  1. Create rectangle path using Bazier curve and straight lines tool as shown here

  2. Adjust width and height as needed and convert object to path by selecting rectangle and clicking on Path>Object to Path (or click Shift+Ctrl+C) and you will get the result shown below:

enter image description here

Note: while doing this make sure Bazier curve and straight lines tool is selected and after making this don't forget to reset Tool Control Bar>Mode and Tool Control Bar>Mode so that you can create normal paths afterword

You can modify paths to get the results you want by using this process. Here is my Inkscape file. I hope this will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.