Tool Request: 659400585 - create_file
{"content":"<!DOCTYPE html>\n<html>\n<head>\n <title>Rotating Hexagon with Bouncing Balls</title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n }\n\n svg {\n width: 200px;\n height: 200px;\n }\n\n polygon {\n fill: #3498db;\n stroke: #2980b9;\n stroke-width: 2;\n animation: spin 5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n circle {\n fill: #e74c3c;\n }\n </style>\n</head>\n<body>\n <svg viewBox=\"0 0 100 100\">\n <polygon points=\"50,10 90,30 90,70 50,90 10,70 10,30\"/>\n <circle cx=\"20\" cy=\"20\" r=\"3\">\n <animate attributeName=\"cx\" values=\"20;80;20\" dur=\"2s\" repeatCount=\"indefinite\" calcMode=\"linear\"/>\n <animate attributeName=\"cy\" values=\"20;80;20\" dur=\"3s\" repeatCount=\"indefinite\" calcMode=\"linear\"/>\n </circle>\n <circle cx=\"80\" cy=\"20\" r=\"3\">\n <animate attributeName=\"cx\" values=\"80;20;80\" dur=\"3s\" repeatCount=\"indefinite\"/>\n <animate attributeName=\"cy\" values=\"20;80;20\" dur=\"4s\" repeatCount=\"indefinite\"/>\n </circle>\n <circle cx=\"50\" cy=\"10\" r=\"3\">\n <animate attributeName=\"cx\" values=\"50;10;50\" dur=\"4s\" repeatCount=\"indefinite\"/>\n <animate attributeName=\"cy\" values=\"10;90;10\" dur=\"2s\" repeatCount=\"indefinite\"/>\n </circle>\n </svg>\n</body>\n</html>","file_name":"index.html"}