1+ let Pattern = {
2+ coordinates : [
3+ "19,5" , //0 top
4+ "33,13" , //1 topRight
5+ "33,29" , //2 bottomRight
6+ "19,37" , //3 bottom
7+ "5,29" , //4 bottomLeft
8+ "5,13" , //5 topLeft
9+ //inner
10+ "19,13" , //6 innerTop
11+ "26,17" , //7 innerTopRight
12+ "26,25" , //8 innerBottomRight
13+ "19,29" , //9 innerBottom
14+ "12,25" , //10 innerBottomLeft
15+ "12,17" , //11 innerTopLeft
16+ //center
17+ "19, 21" //12 center
18+ ] ,
19+
20+ plot : function ( points ) {
21+ let shape = [ ] ;
22+ for ( const point of points ) {
23+ shape . push ( Pattern . coordinates [ point ] ) ;
24+ }
25+ return shape . join ( "L" ) ;
26+ } ,
27+ draw : function ( plot , closed ) {
28+ let path = document . createElementNS ( "http://www.w3.org/2000/svg" , "path" ) ;
29+ let closure = closed ? "z" : "" ;
30+ path . setAttribute ( "d" , "M" + plot + closure ) ;
31+ path . classList . add ( "animated" ) ;
32+
33+ return path ;
34+ }
35+ } ;
36+
37+ window . addEventListener ( "DOMContentLoaded" , function ( event ) {
38+ let svg = document . getElementById ( "svg" ) ;
39+ let center = document . getElementById ( "c12" ) ;
40+ center . addEventListener ( "mouseover" , ( ) => addCircle ( ) , false ) ;
41+ } ) ;
42+
43+ let lines = {
44+ c0 : {
45+ shape : [ 0 , 1 , 2 , 3 , 4 , 5 ] ,
46+ closed : true
47+ } ,
48+ c1 : {
49+ shape : [ 1 , 3 , 5 ] ,
50+ closed : true
51+ } ,
52+ c2 : {
53+ shape : [ 4 , 0 , 2 ] ,
54+ closed : true
55+ } ,
56+ c3 : {
57+ shape : [ 3 , 0 ] ,
58+ closed : true
59+ } ,
60+ c4 : {
61+ shape : [ 4 , 1 ] ,
62+ closed : true
63+ } ,
64+ c5 : {
65+ shape : [ 5 , 2 ] ,
66+ closed : true
67+ } ,
68+ c6 : {
69+ shape : [ 6 , 7 , 8 , 9 , 10 , 11 ] ,
70+ closed : true
71+ } ,
72+ c7 : {
73+ shape : [ 7 , 5 , 7 , 3 ] ,
74+ closed : true
75+ } ,
76+ c8 : {
77+ shape : [ 8 , 6 , 10 ] ,
78+ closed : true
79+ } ,
80+ c9 : {
81+ shape : [ 5 , 2 ] ,
82+ closed : true
83+ } ,
84+ c10 : {
85+ shape : [ 10 , 0 , 2 ] ,
86+ closed : false
87+ } ,
88+ c11 : {
89+ shape : [ 11 , 3 , 11 , 1 ] ,
90+ closed : false
91+ }
92+ } ;
93+
94+ for ( let [ line , value ] of Object . entries ( lines ) ) {
95+ let circle = document . getElementById ( line ) ;
96+ let path = Pattern . draw ( Pattern . plot ( value . shape ) , value . closed ) ;
97+ svg . appendChild ( path ) ;
98+ setTimeout ( function ( ) {
99+ path . remove ( ) ;
100+ } , 5000 ) ;
101+ circle . addEventListener ( "mouseover" , ( ) => addShape ( value ) , false ) ;
102+ circle . addEventListener ( "touchmove" , ( ) => addShape ( value ) , false ) ;
103+ }
104+
105+ function addShape ( value ) {
106+ let newPath = Pattern . draw ( Pattern . plot ( value . shape ) , value . closed ) ;
107+ svg . appendChild ( newPath ) ;
108+ setTimeout ( function ( ) {
109+ newPath . remove ( ) ;
110+ } , 5000 ) ;
111+ }
112+
113+ function addCircle ( ) {
114+ let circle = document . createElementNS ( "http://www.w3.org/2000/svg" , "circle" ) ;
115+ let circle2 = document . createElementNS (
116+ "http://www.w3.org/2000/svg" ,
117+ "circle"
118+ ) ;
119+ circle . setAttribute ( "r" , 15.7 ) ;
120+ circle . setAttribute ( "cx" , 19 ) ;
121+ circle . setAttribute ( "cy" , 21 ) ;
122+ circle . classList . add ( "path-circle" ) ;
123+ circle2 . setAttribute ( "r" , 16.5 ) ;
124+ circle2 . setAttribute ( "cx" , 19 ) ;
125+ circle2 . setAttribute ( "cy" , 21 ) ;
126+ circle2 . classList . add ( "path-circle" ) ;
127+ circle2 . classList . add ( "sm" ) ;
128+ svg . appendChild ( circle ) ;
129+
130+ setTimeout ( function ( ) {
131+ svg . appendChild ( circle2 ) ;
132+ } , 500 ) ;
133+
134+ setTimeout ( function ( ) {
135+ circle . remove ( ) ;
136+ } , 5000 ) ;
137+ setTimeout ( function ( ) {
138+ circle2 . remove ( ) ;
139+ } , 5500 ) ;
140+ }
0 commit comments