Suche senden
Hochladen
RaphaëlJS magic
•
Als PPTX, PDF herunterladen
•
1 gefällt mir
•
971 views
Kseniya Redunova
Folgen
RaphaelJS library overview, OdessaJS conference, 2013
Weniger lesen
Mehr lesen
Technologie
Kunst & Fotos
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 21
Jetzt herunterladen
Empfohlen
SVG overview
SVG overview
Satoshi Watanabe
Лаб.р №1 "Фабрика Blockly"
Лаб.р №1 "Фабрика Blockly"
OlesiaJL
SVG and the web
SVG and the web
Ken Shoufer Web Design
Фабрика "Blockly" (исправлено)
Фабрика "Blockly" (исправлено)
OlesiaJL
Creating dynamic SVG elements in JavaScript
Creating dynamic SVG elements in JavaScript
Joseph Khan
Mastering CSS Animations
Mastering CSS Animations
Goodbytes
D3js learning tips
D3js learning tips
LearningTech
THE DATA DRIVEN WEB OF NOW: EXTENDING D3JS (Travis Smith)
THE DATA DRIVEN WEB OF NOW: EXTENDING D3JS (Travis Smith)
Future Insights
Empfohlen
SVG overview
SVG overview
Satoshi Watanabe
Лаб.р №1 "Фабрика Blockly"
Лаб.р №1 "Фабрика Blockly"
OlesiaJL
SVG and the web
SVG and the web
Ken Shoufer Web Design
Фабрика "Blockly" (исправлено)
Фабрика "Blockly" (исправлено)
OlesiaJL
Creating dynamic SVG elements in JavaScript
Creating dynamic SVG elements in JavaScript
Joseph Khan
Mastering CSS Animations
Mastering CSS Animations
Goodbytes
D3js learning tips
D3js learning tips
LearningTech
THE DATA DRIVEN WEB OF NOW: EXTENDING D3JS (Travis Smith)
THE DATA DRIVEN WEB OF NOW: EXTENDING D3JS (Travis Smith)
Future Insights
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
민태 김
How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
Thats Not Flash?
Thats Not Flash?
Mike Wilcox
SVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
Next generation Graphics: SVG
Next generation Graphics: SVG
David Corbacho Román
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
Filip Van Laenen
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Patrick Hund
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
Oswald Campesato
WordCamp Birmingham - Dynamic SVGs with WordPress
WordCamp Birmingham - Dynamic SVGs with WordPress
Kyle Evans
Setting the Stage for SVG Animation
Setting the Stage for SVG Animation
James Nowland
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
Shiraz LUG
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
l10bov
Stegosploit - NCSC ONE 2016
Stegosploit - NCSC ONE 2016
Saumil Shah
SVG's and their potential for programmatic art
SVG's and their potential for programmatic art
Michael Senkow
D3.js and SVG
D3.js and SVG
Karol Depka Pradzinski
Estimates: is there a silver bullet?
Estimates: is there a silver bullet?
Kseniya Redunova
ECMAScript: past, present and future
ECMAScript: past, present and future
Kseniya Redunova
Weitere ähnliche Inhalte
Ähnlich wie RaphaëlJS magic
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
민태 김
How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
Thats Not Flash?
Thats Not Flash?
Mike Wilcox
SVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
Next generation Graphics: SVG
Next generation Graphics: SVG
David Corbacho Román
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
Filip Van Laenen
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Patrick Hund
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
Oswald Campesato
WordCamp Birmingham - Dynamic SVGs with WordPress
WordCamp Birmingham - Dynamic SVGs with WordPress
Kyle Evans
Setting the Stage for SVG Animation
Setting the Stage for SVG Animation
James Nowland
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
Shiraz LUG
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
l10bov
Stegosploit - NCSC ONE 2016
Stegosploit - NCSC ONE 2016
Saumil Shah
SVG's and their potential for programmatic art
SVG's and their potential for programmatic art
Michael Senkow
D3.js and SVG
D3.js and SVG
Karol Depka Pradzinski
Ähnlich wie RaphaëlJS magic
(20)
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
How to build a html5 websites.v1
How to build a html5 websites.v1
Thats Not Flash?
Thats Not Flash?
SVGD3Angular2React
SVGD3Angular2React
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Next generation Graphics: SVG
Next generation Graphics: SVG
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Web Vector Graphics
Web Vector Graphics
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
WordCamp Birmingham - Dynamic SVGs with WordPress
WordCamp Birmingham - Dynamic SVGs with WordPress
Setting the Stage for SVG Animation
Setting the Stage for SVG Animation
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
Stegosploit - NCSC ONE 2016
Stegosploit - NCSC ONE 2016
SVG's and their potential for programmatic art
SVG's and their potential for programmatic art
D3.js and SVG
D3.js and SVG
Mehr von Kseniya Redunova
Estimates: is there a silver bullet?
Estimates: is there a silver bullet?
Kseniya Redunova
ECMAScript: past, present and future
ECMAScript: past, present and future
Kseniya Redunova
Marionette talk 2016
Marionette talk 2016
Kseniya Redunova
MarionetteJS. Shall we dance?
MarionetteJS. Shall we dance?
Kseniya Redunova
Stylish visualisations with D3.js (OdessaJS)
Stylish visualisations with D3.js (OdessaJS)
Kseniya Redunova
JavaScript design patterns overview
JavaScript design patterns overview
Kseniya Redunova
Mehr von Kseniya Redunova
(6)
Estimates: is there a silver bullet?
Estimates: is there a silver bullet?
ECMAScript: past, present and future
ECMAScript: past, present and future
Marionette talk 2016
Marionette talk 2016
MarionetteJS. Shall we dance?
MarionetteJS. Shall we dance?
Stylish visualisations with D3.js (OdessaJS)
Stylish visualisations with D3.js (OdessaJS)
JavaScript design patterns overview
JavaScript design patterns overview
Kürzlich hochgeladen
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Zilliz
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
The Digital Insurer
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
apidays
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
The Digital Insurer
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Kürzlich hochgeladen
(20)
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Architecting Cloud Native Applications
Architecting Cloud Native Applications
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
RaphaëlJS magic
1.
Raphaël
magic Ксения Редунова
2.
Чего хочет заказчик?
3.
4.
SVG
Canvas Does all the job Complete control DOM elements Lots of work Vector graphics Pixel perfect
5.
Scalable Vector Graphics SVG XML DOM elements JS events for IE6 – 8 VML “VML пока поддерживается лишь немногими программами, среди которых Internet Explorer 5.0+ и Microsoft Office 2000+” © Wikipedia Google Maps использует VML для визуализации векторов на IE
6.
Firefox -SVG <div id="mypaper"
class="paper"> <svg height="302" version="1.1" width="302" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: - 0.5px;"> <desc>Created with Raphaël 2.1.0</desc> <defs/> <circle cx="150" cy="150" r="50" fill="#ff0000" stroke="#ffffff" style="" stroke-width="3"/> </svg> </div>
7.
<div class="paper" id="mypaper">
IE8 - VML <div style="left: 0px; top: 0px; width: 302px; height: 302px; overflow: hidden; display: inline-block; position: relative; cliptop: 0px; clipright: 302px; clipbottom: 302px; clipleft: 0px;"> <span style="left: -9999em; top: -9999em; line-height: 1; padding-top: 0px; padding- right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute; "> </span> <shape class="rvml" style="left: 0px; top: 0px; width: 1px; height: 1px; position: absolute;" raphael="true" raphaelid="0"> <stroke class="rvml"></stroke> <skew class="rvml"></skew> <fill class="rvml"></fill> </shape> </div> </div>
8.
Raphael for SVG is
like jQuery for DOM API and Reference
9.
Basic Demos Кружочек Много квадратиков
10.
SVG paths "M 250
250 l 0 -50 l -50 0l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"
11.
SVG paths syntax SVG
path reference
12.
SVG icons http://raphaeljs.com/icons/
M1,1v30h30V1H1zM17.326,24.398c0,2.92-1.712,4.248- 4.209,4.248c-2.255,0-3.564-1.168-4.229- 2.576l0,0l0,0l0,0l2.296- 1.391c0.443,0.777,0.846,1.442,1.812,1.442c0.926,0,1.511- 0.354,1.511-1.771V14.77h2.819V24.398zM23.992,28.646c- 2.618,0-4.311-1.248-5.135-2.879l2.295- 1.328c0.604,0.979,1.39,1.711,2.779,1.711c1.168,0,1.904- 0.584,1.904-1.396c0-0.966-0.766-1.311-2.054- 1.865L23.08,22.58c-2.034-0.865-3.383-1.953-3.383- 4.249c0-2.114,1.604-3.726,4.128- 3.726c1.792,0,3.081,0.625,4.008,2.254l-2.19,1.406c-0.479- 0.861-1.006-1.209-1.812-1.209c-0.825,0-1.353,0.521- 1.353,1.209c0,0.852,0.521,1.188,1.729,1.711l0.704,0.309c2. 396,1.021,3.746,2.07,3.746,4.43C28.664,27.259,26.671,28.6 46,23.992,28.646z Leaf icon demo
13.
Transformation "t100,100r30,100,100s2,2,100,100r45s1.5" // translate 100,
100, rotate 45 el.transform("t100,100r45"); Paper.set() var st = paper.set(); st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5) ); st.attr({fill: "red"});
14.
Animation Basic animation demo Easing
demo
15.
Drag’n’Drop example r.drag(move, start,
up); Drag-n-drop demo
16.
From the scratch
to web animation with Raphael Spline morphing demo
17.
Convert any SVG
to Raphael object SVG to Raphael Converter Demo - cat Cats morphing
18.
Demo – world
map http://raphaeljs.com/world/
19.
Free Transform mydeco.floorplanner.com/rooms/moodboard
20.
RaphaelJS http://raphaeljs.com Dmitry Baranovsky http://dmitry.baranovskiy.com/ SVG paths
reference http://www.w3.org/TR/SVG/paths.html SVG paths to Raphael converter http://toki-woki.net/p/SVG2RaphaelJS/
21.
Q&A Ксения
Редунова @Katidotk
Jetzt herunterladen