provide a webpage that creates an inline SVG- based circle with two aligned text strings

I need a single webpage where the user can fill in some parameters and then the svg image is dynamically updated.

Following parameters need to be adjustable:

Upper Text (3 to 15 letters)

Lower Text (3 to 15 letters)

Font ( 10 selected google fonts from drop down list. The fonts are pre-loaded into the page )

Font Size

Letter distance

Following parameters are fix: SVG circle size, stroke and fill colors, text color....

The page then shows the SVG graphics and a text line of the selected parameters for easy copy-pasting into an email or order form.

See these fiddles as inspiration:

[url removed, login to view] to see the page layout with input fields

[url removed, login to view] (to see the SVG graphics with two aligned text strings. this fiddle uses a JS library that is not allowed for this project, use only SVG!)

Deliverables: a jsfiddle and a complete html page. Only simple javascript is allowed that runs on a wordpress page.

Following parameters shall be fix for the web page user, but easily customizable by variables in the code to adjust the appearance of the inline SVG image:

size of inner and outer circle by changing the svg width and height
text color
text dropshadow color, x and y
outer ring size, color, blur and dropshadow
inner ring stroke color, stroke width, fill color, blur and dropshadow
Lower text

Beceriler: CSS, HTML, Javascript, SVG

Daha fazlasını gör: Design a brochure style webpage for a UK-based Cyber Security consultancy., svg based engine, web design based circle, svg javascript, alternative to iframe for external website, embed website html without iframe, jspdf documentation, embed external web page in html, how to embed a webpage into another web page, embed another website into my website, embed website iframe, javascript, html5, project build website based supplied template text, html order form pricing based quantity, based design aligned requirements, asp sql based order form, costs based items order form html, turn based war game text code, mysql based order form

İşveren Hakkında:
( 1 değerlendirme ) Lund, Sweden

Proje NO: #16619997



Hello there, I would like to be considered for this job as I have great working experience in HTML, CSS and JavaScript/jQuery development. Thanks, Ramesh

%selectedBids___i_period_sub_7% gün içinde 50%project_currencyDetails_sign_sub_9% %project_currencyDetails_code_sub_10%
(69 Değerlendirme)

Bu iş için 7 freelancer ortalamada €73 teklif veriyor


UPDATE: I will pass a jsfiddle working example as well. Hi there, I'm Matt Sergej and can create your web page with pure javascript only driven SVG creation. With 23 years of IT development and web mastering expe Daha Fazla

€150 EUR in 3 gün içinde
(21 Değerlendirme)

Hi greetings of the day I am a Experienced PHP Developer based out in Chennai,India. My experience revolves around development of web and mobile applications,Ecommerce websites. I believe that I am well qualified to un Daha Fazla

1 gün içinde %bids___i_sum_sub_32%%project_currencyDetails_sign_sub_33% EUR
(32 Değerlendirme)
1 gün içinde %bids___i_sum_sub_32%%project_currencyDetails_sign_sub_33% EUR
(2 Değerlendirme)

I have experience in editing SVG elements, you can see an example of what I have done here: [login to view URL] Programmed in javascript, without the use of libraries. It works in the browser, cre Daha Fazla

€50 EUR in 2 gün içinde
(0 Değerlendirme)

We have worked on my such projeccts and we can provdie you the HTML page that generates inline SVG Image.

1 gün içinde %bids___i_sum_sub_32%%project_currencyDetails_sign_sub_33% EUR
(0 Değerlendirme)

I can create the solution using angularjs and [login to view URL] i have used them before in a card designer project, you can check it here: [login to view URL]!/cardDesigner/newCard/

€77 EUR in 3 gün içinde
(0 Değerlendirme)