platonicsvg v1.0.3
platonicSVG
platonicSVG is a simple custom element which shows a spinning Platonic Solid as SVG. You can control which solid to show (Tetrahedron ~ Icosahedron), spinning direction and speed, or color of the faces and strokes by changing element's attributes.
Install
When you are using node
npm install platonicsvgor
yarn add platonicsvgWhen load from html directly, hosting yourself,
<script src="./yourhost/platonicsvg.js" type="text/javascript" charset="utf-8" async defer></script>Start to use.
Very simple. Just put the tag like a regular HTML element wherever you like.
<div>
<platonic-svg></platonic-svg>
</div>Custom to use.
With setting attributes, you can control the SVG's behavior as below.
<platonic-spinner id="mySolid"
solid=dodecahedron
width=128
height=128
edge-color=#3c3c3c
edge-width=1px
face-color=rgba(32,32,128,0.6)
dx=2
dy=0
dz=1
></platonic-spinner>Solid Type
With solid attribute, you can specify which solid to show.
Specify a number of faces (means using integer) is also OK.
4,tetra,tetrahedron,simplex=> Tetrahedron.6,hexa,hexahedron,cube=> Hexahedron.8,octa,octahedron=> Octahedron.12,dodeca,dodecahedron=> Dodecahedron.20,icosa,icosahedron=> Icosahedron.
Other Settings
Here is the table of rest of attributes you can control.
| Attribute Name | Description | Value Type | Default Value |
|---|---|---|---|
| width | width of the SVG frame containing a solid | integer | 256 |
| height | height of the SVG frame containing a solid | integer | 256 |
| back-color | SVG frame color | CSS color | inherit |
| edge-color | Solid edge's color | CSS color | #6E777C |
| edge-width | Solid edge's width | CSS color | 1px |
| face-color | Solid face's color | CSS color | rgba(215,230,244, 0.8) |
| SVGClassName | Class Name set to SVG element | string | "platonic-svg" |
| PolyhedronFaceClassName | Class Name set to a solid's faces | string | "platonic-face" |
| dx | x component of a spinning vector | integer | 1 |
| dy | y component of a spinning vector | integer | 1 |
| dz | z component of a spinning vector | integer | 0 |
| fps | frame per sec of spinning | integer | 40 |
| progress-max | same as "max" attribute of a progress tag | integer | 100 |
| progress-value | same as "value" attribute of a progress tag | integer | null |
| progressed-face-color | Solid face's color which represents progressed part | CSS color | rgba(0,0,0,0.6) |
Other Utilities
platonicSVG expose a few utility for you.
Z value
With the current SVG specifications, each child element can't be represent "z-index" by attributes. The "z order" only achieved by an order of elements. So platonicSVG calculates "z-index" of each face-polygon from a original 3D coordinates and sort them by "z order" on every rendering process.
Note that this z value is stored as a property of each polygon object value, not in tag's attribute.
Internally, z axis projection is used.
:hover thing
Thus platonicSVG has "z order", you can do :hover stuff just put your own style sheet.
When do that, don't forget to put !important on the style because each polygon has its own inline style by default.
.platonic-face:hover{
fill: #454C50 !important;
}"progress-value" attribute
By updating "progress-value" attribute, you can do slimilar thing to progress tag.It changes face color.
You can control the color by "progressed-face-color" attribute or set style to .progressed. Will collide to other style name? just using platonic-svg > progressed. Remember that you can change platonic-svg by setting "SVGClassName" attribute.