Step 1: Disable SIP
Enter recovery mode
- Shutdown your macbook
- Press keys:
Command + R
- Press
power button
- Release keys
Command + R
when see Apple logo appear - Open Terminal app on recovery screen, then run below command:
{"nodes":[{"x":444,"y":275},{"x":378,"y":324},{"x":478,"y":278},{"x":471,"y":256},{"x":382,"y":269},{"x":371,"y":247},{"x":359,"y":276},{"x":364,"y":302},{"x":400,"y":330},{"x":388,"y":298},{"x":524,"y":296},{"x":570,"y":243},{"x":552,"y":159},{"x":502,"y":287},{"x":511,"y":313},{"x":513,"y":265},{"x":602,"y":132},{"x":610,"y":90},{"x":592,"y":91},{"x":575,"y":89},{"x":607,"y":73},{"x":591,"y":68},{"x":574,"y":73},{"x":589,"y":149},{"x":620,"y":205},{"x":621,"y":230},{"x":589,"y":234},{"x":602,"y":223},{"x":548,"y":188},{"x":532,"y":196},{"x":548,"y":114},{"x":575,"y":174},{"x":497,"y":250},{"x":576,"y":196},{"x":504,"y":201},{"x":494,"y":186},{"x":482,"y":199},{"x":505,"y":219},{"x":486,"y":216},{"x":590,"y":306},{"x":677,"y":169},{"x":657,"y":258},{"x":667,"y":205},{"x":552,"y":227},{"x":518,"y":173},{"x":473,"y":125},{"x":796,"y":260},{"x":731,"y":272},{"x":642,"y":288},{"x":576,"y":269},{"x":605,"y":187},{"x":559,"y":289},{"x":544,"y":356},{"x":505,"y":365},{"x":579,"y":289},{"x":619,"y":282},{"x":574,"y" |
Mouseover to draw circles!
This is a quick proof-of-concept example demonstrating how to create a canvas scenegraph in the DOM using document fragments. The scenegraph in this example consists of a simple container svg
element and a number of child circle
elements.
The content positions and sizes are calculated offline and the actual DOM tree
doesn't even need to be aware of out svg
. To render them, we use a timer that iterates over the child elements and draws them to a canvas element.
This is a modification of the original DOM-to-Canvas using D3 proof of conncept.
vendor(prop, args) | |
-webkit-{prop} args | |
-moz-{prop} args | |
-ms-{prop} args | |
-o-{prop} args | |
{prop} args | |
border-radius() | |
vendor('border-radius', arguments) |