platonicsvg

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 platonicsvg

or

yarn add platonicsvg

When 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.